Tips on Customizing your Blogger CSS

I'd like to share with you some tips that I personally use when I want to modify my Blogs CSS but find it hard to know which CSS Selectors to use.

First you need to be using the Google Chrome Web Browser (it's by far the best browser currently on the market so you should be using it anyway :) )

Now you need to install a very useful Chrome Extension called Stylebot (Download Link)

This extension allows you to change the CSS of any webpage. I find it useful for removing ads from sites and to change colour schemes etc. However it also has an added side effect in that it allows you to change/test CSS changes on the fly and gives you the CSS that is used.

So download and install Stylebot and once installed you should see a little "css" indicator in your address bar.

I'll walk you through a simple example on one of my blogs

http://darkufo.blogspot.com/

So goto the link above and when it's loaded click the CSS icon in the address bar.

You should then be presented with the Stylebot panel like below.

Now for this example I want to find the CSS of my post titles and change it to another color and size.

First click the "Selection Tool" in Stylebot if it's not already selected. It turns blue when selected.

Now when you move your most over the webpage, you will see a green highlight box over the various elements.

Now in this example we want to select and highlight the post Title. So move the mouse over the title so that the green highlight box is displayed and click the mouse. This will select the Title CSS so that we can start to make changes.

Once clicked the Stylebot panel will be updated and any changes you make in the panel will be reflected Live on your page.

So here I'm going to make the font larger by setting it to 28px

And then change the colour to Red.

When you have done this you will see the effect live on the web page.

Now this has not actually changed how the blog will look for other visitors to your site, just you.

So we want to see what CSS changes have been made so that we can add them to your blogs CSS.

At the bottom of the Stylebot panel there is an "Edit CSS" button. Click that

This will load up the CSS changes that you have made to your blog.

Now you simply select the CSS in that box and copy it to your clipboard.

Now with your CSS in your Clipboard you need to paste it into your blogs template/CSS.

So to do this we first goto your Blogs Dashboard at www.blogger.com and goto the Template Section

Now Click the Customize button.

This will load up the Template Designer. You want to click on Advanced

In the right hand panel, scroll down until you see the "Add CSS" at the bottom of the list and click it.

This will load up the CSS Editor and you paste the CSS that you copied from Stylebot into this area.

The change should be reflected on the site preview below and if happy, simply press the Apply to Blog and you're done :)

Hope you have found this useful and if you have any questions please don't hesitate to ask in the comments below.