Mod My Blog Monday: Centering Tabs and Headers

Today's Mod My Blog follows on from last week.

I'm going to show you an easier way to change your tab colour! So much easier, I can't believe it didn't occur to me last week - sorry guys! 

Some people found that their header wasn't centered any more when they applied the "Picture Window" template, so I'll show you how to centre that, and while we're at it I'll show you how to centre your tab buttons!

OK, first we need to go into the Template Designer. Click the "Design Tab" then "Template Designer"

Now we want to edit the CSS. On the left hand side click "Advanced", then scroll down and click "Add CSS". The codes I give you should be entered in the big text box that shows up. To apply the changes we make, click "Apply to Blog" after we add the codes. 

OK, so you can see in the image above that my header is left aligned and my tabs have no background colour.

To change the tab background colour:

Add this code to the text box:

.tabs-inner .widget li a {background:pink; color:red;}

This makes the tabs pink with red writing.

To centre the tabs:

Add this code to the text box:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

This centres your tabs! This code snippet assumes you're working with the "Picture Window" template. The ".PageList" part might need to be called something different if you're using a different template.

To centre your header image:

Add this code to the text box:

#header-inner img {margin: 0 auto !important;}

Your header image should be centred now :) This assumes you're using the "Instead of title and description" option when you set up your header.

When I use all three codes and click "Apply to Blog", my test blog looks like this:

And my Template Designer looks like this:

Click on the image to see a full-sized version.

The colours of the highlighted sections in the image above match up with the colours I used in the code snippets.

How easy was that?! I hope it helps! Let me know if you need anything clarified, if you need a hand or if you have something you'd like me to cover next week!