Add a custom CSS plugin
To start adding your CSS code to the header, make sure you have the right plugin.
- Open WordPress dashboard.
- Click Plugins > Add New.
Key Simple Custom CSS into the search plugins box.- Click the Install Now button within the Simple Custom CSS search result.
Using Simple Custom CSS
After Simple Custom CSS has been installed & activated, make sure your WordPress dashboard is open. Go to Appearance > Customize > Additional CSS. Add the CSS code, click the blue Publish button at the top. Then click the tiny X in the upper left-hand corner to close the Customize panel.
If you go to tscsidesleeper.com/, you will see two animations I created for a client. I wanted to have one above the other on the right side of the page. So, I added them into a single-column table.
I wanted the two animated GIFs to be as close together as possible and to have no table borders. So, I used the CSS code in the pink box above.
Add the CSS code to the header
Border code
In the box to the right is a sample of CSS code. The Simple Custom CSS plugin will insert this CSS code into the header. That causes every table on the website to have 1 pixel-wide black borders around the entire table and around each cell. Adjoining borders will be combined so that there are no double lines.
This style will add borders to all of the
- Tables in the website (table),
- To the cell headings (th) and
- The data cells (td).
The border attributes determine that the borders will be
-
- 1 pixel wide
- Solid
- Black
Collapsed. I.e., they will be on top of each other. For instance, two adjacent cells will have their borders in the same space as opposed to having 2 parallel lines.
The sample above on the left has parallel lines for adjacent borders. The sample on the right has the same lines collapsed.
Vertical alignment code
Aesthetics is an essential part of web design. Aligning the cell content uniformly is an important aesthetic concept to follow. So, you must use terms like top, middle or bottom in you CSS code.
Copy and paste this code into your header:
img.top {
vertical-align: text-top;
}
Code for aligning within cell
Modify this code for aligning the data within the cells left, right or center.
<style>
td{
text-align:left;
}
Padding between data and border
If you text is flush against the border, it usually looks unprofessional. So, add this code to your header:
td {
padding: 15px;
}
This example is 15 pixels. Change the padding to whatever number would look best.
Adding the CSS code to WordPress
- Open the WordPress dashboard for the website with which you are working.
- Click on Plugins > Installed Plugins.
- Scroll down to Simple Custom CSS and
- Click Add CSS.
- Add the code below to the bottom of the code that is already there.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style> - Click the blue Update Custom CSS button.
- You are finished with the table border code.
Adding CSS code in the Enfold theme
Occasionally you will search how to make a change and some tech support person will tell you to add a certain CSS code to your source code. For instance, the CSS code below will remove the Enfold logo from above the header in your web pages. (See example of website created with the Enfold theme.)
.logo {
visibility: hidden !important;
}
To do that:
-
Go to Appearance > Themes- Among other things, Enfold Child Theme shows up.
- Click Customize
- Click on Additional CSS
- Insert the CSS code
- Click Publish
- Go to an Enfold page that was already
open on your desktop - Notice the Enfold logo at the top
- Refresh to page and the logo will have disappeared.
More information about CSS code
For more detailed information, go to the W3Schools website. If there is ANYTHING you want to know about HTML, CSS, etc., simply key w3schools plus your specific area of interest into a search engine window. For instance, I wanted to know more about coding for table attributes. I simply keyed w3schools table into a Google window.