Tweaking your CSS

If you know what you are doing with CSS you can make tweaks to your site to get things just right. Start with a ready-made theme that you like, then tweak, tweak, tweak, until it’s exactly the way you want it!

If you have never worked with CSS, start by learning about the basics so you’ll know what you’re doing when you come to do some tweaking.

If you already know the basics, let’s get tweaking!

How to work out what CSS to tweak

When you look at your site and you see something you want to change you’ll need to figure out what CSS is causing it to display in the current way. For example what if your main site heading is grey and you wish it was blue … how can you tell what’s making it grey, so you can change it?

The Inspector is your friend! *

This is when you discover the joys of the code inspector that is built into most browsers. So in our example we’d right click on that heading and choose ‘inspect element’.

Depending on your browser, a bunch of stuff is going to appear on the right or at the bottom (or even in a new window). This stuff is all about the code that’s making up the page. You’ll see the HTML code that makes up the structure and content of the page, and then you’ll also see a box showing the CSS styles that are affecting the item you right clicked on – in our case the heading.

If you do this on my site, and inspect ‘Suzy Blue Web Thoughts’ up there at the top, you’ll see that the first item coming up in the CSS box is:

.site-title a {
    text-decoration:none;
    color:#666;
}

This shows you that the class ‘site-title’ is what’s making this heading grey, so if we want it to be blue we’ll have to change this class. You can test it out in the inspector by editing the code there to see what happens. For example, try replacing #666 with #3F83C7.

So now what?

Now you know what you want to change, how do you actually go about changing it?

If you’re using WordPress.com, you’ll need to have the Premium Plan – with that you can add custom CSS which will over-rule your theme’s CSS. So you could add this code to change the colour:

.site-title a {
    color:#666;
}

If you are using a self-hosted WordPress.org site you can either modify the CSS file for the theme directly or create a ‘child theme‘ where you just add the CSS you want to over-rule (similar to WordPress.com).

When using the custom CSS tool in WordPress.com, it rather handily displays the effect your code will make in the preview area of the customizer, so you can see straight away if your change has the desired effect. Always remember to click Save & Exit when you’re done though!

I’m stuck!

If you are confused by all this there is help out there. For WordPress.com users, there is a CSS-specific forum where you can ask questions and volunteers or staff will help. Don’t try asking Happiness Engineers about it in live chat as they will only be allowed to give you basic advice and will direct you to the forums.

For those with self-hosted sites there is a Themes & Templates support forum which includes CSS advice.

Also if you need a hand, drop me a message via my contact form or leave a comment below and I’ll see what I can do to help 🙂

*  More about Browser Code Inspectors: Chrome, FireFox, Internet Explorer

Leave a Reply

Your email address will not be published. Required fields are marked *