Easy WordPress Theme Tweaks With CSS

If you are using a free theme with your WordPress blog, you may find yourself stuck with a colour scheme, formatting etc.

Here is how to break out of that in fairly easy way. I’m going to use Firefox, because that is the browser I know, but I expect other browsers have similar functionality.

So open two tabs in Firefox: your blog’s Dashboard in one, and the actual blog in the other.

In the Dashboard, click on Appearance/Customise. Then click on the Additional CSS button.

You will see your blog on the right hand side, and a bar where CSS commands can be entered on the left. If you are just starting, it will probably be empty.

Meanwhile, in the other tab showing your blog, rightclick the thing you want to change and select Inspect Element.

A panel will appear below showing the html you are looking at, and the values of the various elements, with their styles inherited from stylesheets (that describe how wide, how tall, or how red something is) or parent elements that your element is positioned under. The item you clicked will be highlighted. You need to look through the various values in the right hand panels, and decide what needs to be changed. You can actually edit them to see how the webpage changes. This change is only temporary, so it is fine to experiment.

Sometimes, the values you want are not in the element you are looking at, and you will need to look at the parent elements that precede it.

Eventually you will find the bit that you want, and (temporary) values that do what you want it to do. Then right click on that part, and select Copy Rule.

Then you can go back to the tab with you CSS bar, and simply paste that rule in. You can make further changes and experiment, if you wish, the framed blog will change with each CSS rule added.

Finally, to be tidy, go through the rule you added, and remove any lines that you haven’t changed, so that only the bits you have changed are in your CSS.

Then publish and reload your blog and see if it has done what you want.

This method is danger free, as if you ever mess up completely you can just remove part or all off your Additional CSS, and it will go back to how it is.

Some simple things you can do – you can change the size of elements, and space out or close up bits of the page. You can change the colours of element.s My blog’s Theme only has the option of a black background, but as you can see, I have changed that. Also, if there are things that your Theme insists on putting on the blog page, that you don’t want at all, find the parent element of that item, paste it to your CSS, and insert the command

visibility: hidden;

and it will disappear from the page.