Sunday 26 February 2012

Blog Tips: Unselected Blogger Tab Backgound Colours

   I decided to start divulging simple secrets for blogger users here. I've seen on several blogs - even blogs with literally thousands of followers - that even the simplest things can elude us. I have a few points to make over a few posts, but I'll start with one of vanity: changing unselected tab background colours.

   Using blogger's simple Template Designer tool, you'll see that it does have a feature to change the colour of the tabs when they're selected. But when I was starting out a few months ago, I couldn't find a way to change the colours of the tabs that hadn't been selected. I had a nice and simple white/grey and pink theme going, like on my tumblr, but the tabs were just too dark a grey. They stood out like a sore thumb. My tab backgrounds, at the time of writing this, are a lovely neutral green colour, though I intend to create some custom buttons for them soon enough. Otherwise, they are default tabs from blogger.

    I had to  wonder over to the help forums to find any idea of how to do it. If it was out there on the web, it completely eluded me. But now I shall tell you how, whether you are interested or not, to achieve such a thing.

   Go into Design > Edit HTML, and download your current template. This is just in case you, somehow, manage to make some huge error and blow up your blog. You never know. It could happen. Download the template and keep it safe.
   Now go back to the Edit HTML page and press Ctrl+F - this will open a small bar at the bottom of your page (you can try it right now). In the small typing space, paste the following: 
.tabs-inner .widget li a { 
 And press "next". The answer I was given with which I was told all of this told me that the second result was the one to focus on, but there was no "second one" in my HTML. So, I proceeded with the only one I had. The text should look something like this: (you might want to click this picture to make it bigger)

   You see where it says "background:#cacbba;"? Well, it says "#cacbba" in my case because that's the exact colour I am using at this current time, but yours could be anything - but if you're reading this, it's probably not what you want. Now, you have several options here. You can search online for a colour chart to get the hex number, or you can do what I did and mix it up in GIMP. I opened the program up, made the colour I wanted, and found the hex number with the colour tool (click the currently selected foreground colour to get the colour tool up)

   As you can see from the above image, I made an innaccurate colour, but my point stands. Highlighted in blue is the hex number to the colour I've made. Copy the hex number from wherever you've found it and replace the number in your HTML, in my case "cacbba" with the new numbers, but make sure that you don't delete the hash (#) or add a second one, or it won't work.

   Preview your changes using the "preview" button (I promise I do have a degree in rocket science), and once you're happy, you can save it. I tweaked mine several times before I was happy. Colours have a tendancy to look different across smaller or larger spaces and that can be make or break sometimes. But once you're done, that's it. You can change the tabs easily with your current colour scheme whenever you fancy a change.

You're welcome :B


  1. Thanks so much for sharing! I had the exact same problem, horrible dirty grey tabs. What a relief to see them gone. Really appreciate this post :)


I do read every single comment, and I will try to respond where I can. If you have an important question about my blog or my shop, however, then you might be better off contacting me directly by email. Thanks so much for reading my blog!