Amongst the many wonderful things about using WordPress is the flexibility you have in editing your website down to your taste. In the event you are making use of a theme which has some areas you aren’t fascinated about, there is always a place of changing or rather editing the CSS stylesheet. In this tutorial, we plan to reveal to you the best way to edit your website’s footer in WordPress. We are going to do this by editing the CSS stylesheet of your theme. You can go through our tutorial on How to Edit CSS in WordPress to better understand what we want to do. So, are we are good to go?
Let the party get started!
Go to the WordPress admin dashboard and click the “Appearance” tab and then the “Editor” link. Doing this will load a page containing all the templates of the theme currently activated. At the bottom of this specific page, you should see the CSS stylesheet (style.css). Click the Stylesheet to load the CSS stylesheet in the editor window.
At this point, you’ll need to find the footer in the stylesheet. You need to find #footer in the code, so, scroll through the code until you find it. Stop right there once you locate this piece of code. That’s the part we are going to edit.
The developer of your theme might name the code differently; nevertheless, it needs to be along similar lines of code. As seen in this snippet of code, you’ll notice the text size, text color, font style, and more for the footer. Your footer snippet of code might look like this:
padding: 10px 0;
border-top: 1px solid #888;
So, essentially, that code is saying that anything in the footer will “Float Left”, the width of the footer is 100%, this means it will stretch and shrink to the size required. 10px padding is also added to the footer, which means it won’t touch the edge within 10px. The text is placed to “align center” and also, the font size is defined at an 11px. The border-top is utilizing a solid color border and is set at 1px. The background of the footer is white.
To be able to edit your footer, you’ll need to edit the CSS code. In case you would like another color background, you will need to clear the existing hex code and input the color of your desire. Edit the code of the text if you want to alter the text. If your code happens not to have the option to modify the font style and font color, you only need to add some code to it. For instance, in the event you want to alter the color of the text, you’d add:
color: #ffffff (or whatever the code is)
You’ll need to click the “Update” button located at the bottom of the page to save the modified CSS code CSS for the new changes to be effected. Open your page in a new tab in order to refresh and see your changes as you make them.