Changing Blogger Pages Gadget Background and Text Color
No update for 3 weeks, can you actually believe this guy? Anyways, here I am. I've been really tied up due to work and assignments. I've been replying all the contact-form questions though. Which brings me to this week's post. Blog reader Skaerf asked if there is a way to change the background or/and text color of the pages gadget. Yeap, there is. Let's cut to the chase shall we?
And that will be all folks. I'm still contemplating on what to post for next week. If you have useful suggestion/question, do use the contact form to shoot it at me. And I might publish a Transformers-related-post some time next week. This blog is not entirely about Blogger tweaks you know? Don't say I didn't warn you.
Solution:
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: black;
color: white;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
background: yellow;
color: red;
}
Change the words 'black' and 'yellow' to some other colors to change the background color of your pages gadget. And similarly, change 'white' and 'red' to some other colors to change the text color of your pages gadget. You're seeing four different colors defined in the code above because some template highlights the selected tab, that is the tab that contains the page which is being currently viewed in the browser. See the image below to see which color in the code above does what:
Bonus:
If you want a little bit more control, instead of going for basic colors (black, white, red, yellow, etc), you can choose a customised color using hex code. First, go to this useful website:
Hex Color Code Generator
And click on the color that you want, and copy the resulting hex code. All you have to do now is place the hex code in the code above. It will look something like this:
If you want a little bit more control, instead of going for basic colors (black, white, red, yellow, etc), you can choose a customised color using hex code. First, go to this useful website:
Hex Color Code Generator
And click on the color that you want, and copy the resulting hex code. All you have to do now is place the hex code in the code above. It will look something like this:
.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: #000000;
color: #1CE8F7;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
background: #E41619;
color: #FFEF16;
}
And that will be all folks. I'm still contemplating on what to post for next week. If you have useful suggestion/question, do use the contact form to shoot it at me. And I might publish a Transformers-related-post some time next week. This blog is not entirely about Blogger tweaks you know? Don't say I didn't warn you.
Category Article Tutorial
