Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, June 11, 2011

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?


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. 
.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:

.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.

92 comments:

  1. Hey yoboy, how about telling me how I can round the corners of my gadgets to match the lovely rounded corners of my posts :)

    ReplyDelete
  2. @DCG: That's a nice idea. I've already prepared the code for it as of now. I'll publish a post on this one next week. Or if you want the tweak now, feel free to use the contact form and I'll give it to you right away. Cheers.

    ReplyDelete
  3. I'd love to be able to change the background color of the date header above my blog posts ... Nothing fancy, I don't want to add any sort of image there or anything. All I want is to change the background of the date header to white so that I can change the text to black, making it match the other elements of the page.

    ReplyDelete
  4. @Brandi: That will be easy.

    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:

    .date-header{
    background: white !important;
    color: black !important;
    }

    Cheers.

    ReplyDelete
  5. Well I feel kinda silly for not being able to figure that one out on my own now ... But it worked and I was actually able to change it up a bit when I realized I liked it a different way. Thanks so much for your help, it worked like a charm!

    ReplyDelete
  6. Brandi: You're welcome. Cheers and God bless. :)

    ReplyDelete
  7. Nice info. I applied it to my blog page now it has yellow color, I like it.

    Great post!

    tnx.

    ReplyDelete
  8. @pinoy_oman: Hope you do like the color yellow. Or you can always go to any hex code generator website and generate the hex code for your desired colors. I've already included the link in the post.

    Cheers.

    ReplyDelete
  9. Hey Yobo,

    You've been really helpful with my page and I'ver just got one more question.

    I added other pages to the header of my blog. when I click on them, the inside of the paragraph is grey but the border is white. How do I change this to make it the same grey color? I also was wondering how to make the page have rounded corners like when you open up one of my posts.

    http://yagmkylelarson.blogspot.com/p/beliefs.html

    Thanks!

    ReplyDelete
    Replies
    1. Here you go. Add this to your CSS (:

      .article.hentry {
      background: white !important;
      }

      .viewitem-inner .viewitem-content{
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      Delete
  10. I've looked all over for the solution to a problem I have with my tabs bar--maybe you can help? I found some "Pages Gadget No-Stretch" markup to shorten the length of the tabs bar, and it worked great. Problem is, the bar is now a bit short on each end and doesn't match up with my header and content area.

    Also, do you know how I can get rid of the gap between the bar and the content area? Here's my site.

    Thanks!

    ReplyDelete
    Replies
    1. Sure think. For your menu bar, add this to your css. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. :

      #crosscol{
      width: 898px !important;
      margin: 0px !important;
      }

      As for the gap, here's the code:

      .main-inner {
      padding-top: 6px !important;
      }

      Happy weekend :)

      Delete
  11. Oh, you are fantastic! Thank you so much. I think now, by following your example, I'll be able to close the gaps between the columns.

    Thanks again!

    ReplyDelete
  12. Hi. I want to add page tabs to my blog, but I want to have an image behind them...not an image for each tab, but one that extends the width of my page...a colored bar with a V cut into each end. Can you tell me how to do that? Thanks :)

    ReplyDelete
    Replies
    1. Hi Tricia,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #PageList1 ul {
      background: url("http://1.bp.blogspot.com/--PVyHoCWbJw/Ty--BdS6bkI/AAAAAAAAFzk/McNvZXin3lQ/s1600/chiclogo.jpg") !important;
      }

      You need to change the address in the code about with the one that you'd like place in your tabs.

      Delete
    2. Hi, How do i make the page list background transparent?

      Thanks

      Delete
    3. It depends very much to your blog's template. What's your blog's address?

      Delete
    4. Oh my gosh, THANK YOU! I have been trying to figure out the "image behind page bar" for what feels like forever. That one simple code was all I needed, thank you for providing it! I've used your site before so it's not surprising that you would have the answer.

      Delete
    5. Ahh, no problem! :)

      Feel free to leave a comment anywhere in this blog if you have more blogger-related questions!

      Cheers and God bless..

      Delete
  13. Thank you so much! I'll give it a try :)

    ReplyDelete
  14. i like your post.. but i try this on my blog but nothing happened.. try to look http://eknowledge-rj.blogspot.com.. i want to hear from you any suggestions. tanx...

    ReplyDelete
    Replies
    1. Hi Arjie,

      I don't see the code in your blog anymore. It's hard to inspect if the code is no longer present. In any case, see if this works:

      .tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
      background: black !important;
      color: white !important;
      }
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
      background: yellow !important;
      color: red !important;
      }

      Delete
  15. What if I wanted to change the color and/ or background of the Text Gadget. Just a line of text at the top of blog?
    Any thoughts?

    ReplyDelete
    Replies
    1. It depends. Are we talking about the content of the gadget or the title of the gadget? Also, I'm gonna have to see your blog, to be able to suggest a working solution (it depends on your gadget ID)

      Delete
  16. Hi! I can't figure out for the life of me how to get my tabs bar to be flush-left, in line with the rest of the items on my page. Any suggestions? mjpaintingdayton.blogspot.com

    ReplyDelete
    Replies
    1. Hi MJ,

      It seems like your tabs bar is already left-aligned. Have you gotten this fixed or am I missing something?

      Delete
  17. I would love to have pages/links on the side of my blog (www.moderevisited.blogspot.com), but instead of just text that says "about me" "contact" or whatever the pages may be, I would like to insert an image like on this blog: www.whiteorwrong.blogspot.com - can you help??

    ReplyDelete
    Replies
    1. Hi Anne,

      Why not use the Picture gadget? Go to Dashboard - Layout - Add a Gadget - Picture - upload your picture and insert appropriate link :)

      Cheers..

      Delete
  18. sir.
    i am using blogspot my site is www.keralatotalchat.com ,my sub page is shwon www.keralatotalchat.com/p/kerala_total_chat.html, how to edit /p/ , /p/ is very bored pls help me

    ReplyDelete
    Replies
    1. Hi KTC,

      Unfortunately, you can't remove the /p/ tag from your URL.

      Cheers..

      Delete
  19. I have a row of Pages tabs, and another of Labels tabs, both at the top of my blog, under the header. (http://craftbench.blogspot.com/)

    I tried editing them, and almost everything worked out fine. But for some reason, nothing I do has any effect on the "selected" link in my Labels tabs. I entered exactly the same CSS for the Pages and Labels, so I don't know why Pages works right and Labels doesn't. Is there a way I can fix it?

    ReplyDelete
    Replies
    1. Here's a fix for you. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #Label1 ul li span{
      background: none repeat scroll 0 0 #DDDDDD;
      border: 2px dashed teal;
      color: teal;
      margin: 10px;
      display: block !important;
      padding: 9px !important;
      }

      Cheers..

      Delete
  20. Hi - your tutorials are so helpful! I'm curious, how do you make the tabs extend the full width of the page, similar to the header. Here is my blog redesign I'm working on: http://thisismytestblognumber2.blogspot.com/

    Also curious about how to make the footer match the same width and background as the header. Any ideas?

    Thanks again - you're always a huge help!

    ReplyDelete
    Replies
    1. Hi Lauren,

      I'm sorry for the late reply. I've seen your blog, and it looks like all your header, tabs and footer is at their full width. Have you got it sorted?

      Let me know if you need any assistance at all.

      Cheers :)

      Delete
  21. Hi, I found your post that is very helpful; unfortunately, the background image behind the page tabs is not working. I did follow your instruction well but, it didnt work well. I use the new blogger interface, also I use the Simple Template.

    Your example (below):

    #PageList1 ul {
    background: url("http://1.bp.blogspot.com/--PVyHoCWbJw/Ty--BdS6bkI/AAAAAAAAFzk/McNvZXin3lQ/s1600/chiclogo.jpg") !important;
    }

    I did replace the direct link in that part; however, it didnt work. Do you know how to do that in the new Blogger interface? The old Blogger interface is not longer in that. Let me know asap. I'd appreciate your help..

    ReplyDelete
    Replies
    1. Hi Dragonfly,

      The CSS command above should work, regardless of your Blogger interface - except for several reasons. Let's have a look at your blog. What's your blog's address?

      Delete
    2. Ok - It's http://simple-test-blogger.blogspot.com/ Did you see that? My client really wants to put an image behind the page tabs, it really doesn't work. Let me know how this works. Thanks, Yoga ..

      Delete
    3. Hi Dragonfly,

      Give this a try:

      #PageList1 ul {
      background: url("http://img690.imageshack.us/img690/731/20130223020300capture.png") !important;
      }

      If it doesn't work, don't remove the code. Leave it as it is so that I can have a look. Let me know how it goes. Cheers :)

      Delete
  22. Hello,

    I was wondering how to make my pictures bigger in my posts?
    The margin of my blog is already at maximum,
    don't know what I should change...

    Thank you for your help! :)

    http://trendfuse.blogspot.fr/

    ReplyDelete
    Replies
    1. Hi Fuse,

      You can maximize the size of your picture in your posts by changing the URL of your picture in your post's HTML. Here's a walkthrough:

      http://www.southernspeakers.net/2010/11/resize-blogger-post-images.html

      Cheers :)

      Delete
  23. Thanks so much this worked. I am a total newbie to blogging and have very limited knowledge of HTML, codes and the likes. I put a link to this post on my blog about this.

    ReplyDelete
    Replies
    1. Ah, thanks! :) Glad I could be of help Jackie..

      Cheers :)

      Delete
  24. This post was SO helpful, I am just learning HTML ...my question is: this code makes the tab for the page you are currently on a different color...is there a code/way to make every single page tab a different color (having nothing to do with whether it is selected -just how it would look visually)?

    Thank-you SO much!

    ReplyDelete
    Replies
    1. Hi Lemon,

      I suppose it is possible. But it depends on the template that you're using. What's your blog's address?

      Delete
  25. http://thesparrowdays.blogspot.com/ ...the pages across the top are just from adding the blogger's gadget "pages". If it is a convoluted process to achieve making the tabs different colors don't worry about it! Because like I said (and as you'll see from the very few posts I've done) I have little time/experience under my belt to do complicated things yet. Thank-you!

    ReplyDelete
    Replies
    1. Hi Lemon,

      Here you go, add it to your CSS, and change the different colors accordingly (they're easily distinguishable):

      .tabs-outer .widget .widget-content ul li:nth-child(1) a{
      background: black !important;
      color: yellow !important;
      }
      .tabs-outer .widget .widget-content ul li:nth-child(2) a{
      background: white !important;
      color: black !important;
      }
      .tabs-outer .widget .widget-content ul li:nth-child(3) a{
      background: red !important;
      color: white !important;
      }
      .tabs-outer .widget .widget-content ul li:nth-child(4) a{
      background: pink !important;
      color: blue !important;
      }

      Cheers :)

      Delete
  26. I've just applied this and it worked so well - I've been looking for AGES so this is so helpful. THANK YOU. I was just wondering whether you had anything that adjusts the thickness of the pages gadget? The colour etc is great, I just wouldnt have minded the bar being a little thinner. Or perhaps I can just do that through the text font size?

    My blog is laurenjcope.blogspot.co.uk :)

    ReplyDelete
  27. or actually, even better, is there a way to round the edges of the coloured background of the pages gadget? sorry to be a pain!

    ReplyDelete
    Replies
    1. Hi Lauren,

      See if this is what you're looking for:

      http://www.southernspeakers.net/2011/06/rounded-corners-for-blogger-widgets.html

      Cheers :)

      Delete
    2. Thanks for the reply!

      It has worked, but only on the tabs themselves, is there a way to round the edges of the colour back of the tabs? I've used the code on this page and have a coloured bar under the pages gadget. Is there a way to round the edges of that?

      Thank you!

      Lauren

      Delete
    3. Right.. Here you go.. Sorry for the late reply btw:

      .fauxborder-left.tabs-fauxborder-left{
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      Cheers..

      Delete
  28. Maybe you can help me with an issue with my blog found here... http://chillerfied.blogspot.co.uk/

    Notice my page list is a dark red (#7e0a0a) when selected, but transparent when not, the thing is I actually want it white - which is easy enough to do, but it also creates a big white box that stretches across the width of the blog and from the top of my header to the bottom of my page list - which I don't want, I only want the white to appear behind the unselected page list buttons - have ya a magic css code that could help?

    ReplyDelete
    Replies
    1. Hi Gavin,

      Looks like your page links are white unselected (or some milk-ish color, I'm bad with colors). Have you gotten it sorted?

      Here's a screenshot of what I'm seeing:
      http://i.imgur.com/8a6jnyf.png

      Delete
  29. I'm a new follower, love your tips and tricks! :)
    Diana

    ReplyDelete
    Replies
    1. Hi Diana,

      Hope you enjoy your stay here :)

      Delete
  30. Hi, Yoga!

    Loving your blog (so helpful)! I was wondering, how would I go about creating a divider underneath my page tabs? I'd like a divider to separate the page tabs from the posts & sidebar on my blog (honeydueblog.com) - is this something you might be able to help me with?

    Thank you so much!

    ReplyDelete
    Replies
    1. Sounds do-able. But after looking at your blog, I'm a little confused. It seems like your pages bar sits on top of your header, and there is already a divider underneath it. What am I missing?

      Delete
  31. Hello, Yoga!

    I have a little problem with my Page Titles. Here's the link http://yuniquelysweet.blogspot.com/p/blog-page.html And the problem is the title is a little too close to the edge of post area. I want to push it down a bit. Do you have any solutions for that?

    Thank you!

    ReplyDelete
    Replies
    1. Hello Yuni,

      Go to Dashboard - Template - Edit HTML - Find for </b:skin> - Paste the following directly below </b:skin>:

      <b:if cond='data:blog.pageType == "static_page"'>
      <style>
      .date-posts{
      margin-top: 20px !important;
      }
      </style>
      </b:if>

      Delete
  32. Hi Yoga,

    Hopefully you would have a solution for me I am geeking since a week to find out a solution :( I used your code and everything works except one thing: The color of the tabs are changing when I am passing over it (hover), but when I click on it to select, it goes back to the unselected color. Am I clear ? You can have a look here:
    http://lalcoveproductions.blogspot.fr
    Could you help me ?

    Thanks in advance :)

    ReplyDelete
    Replies
    1. Hi Thom,

      I might have some ideas to try on. But this platform isn't very accommodating to carry on with our discussion. Let's bring it to the help forum. Go to Blogger Help Forum and create a discussion there, and let me know its link once it's published.

      Delete
  33. Hi Yoga, I am currently working on my blog layout and , the problem is How can I get the page tabs white, with no lines?

    ReplyDelete
    Replies
    1. Hello Yasmina,

      Are you referring to the background of your tab? Do you want to change it from pink to white? If so, what color would you like the text to be (white on white is a disaster, you see)..

      Or were you looking for a way to remove the white border off of your tabs?

      Delete
  34. Yes i want the border gone ! so that you can only see the text. ( i am changing the color of text )

    ReplyDelete
    Replies
    1. Looks like you've changed the color of your tabs. Have you got this sorted?

      Delete
  35. Hi yogaranam,
    I'm having such a hard time changing the color of my gagets. I can't seem to get the code to changr the gaget color. Really hope to hear from you! Thanks in advance!!!!

    ReplyDelete
    Replies
    1. Hi there,

      Which part of the gadget are you trying to change its color? And what's your blog's address?

      Delete
  36. Hi Yoga, ur blog was so great and helpful!!! I'm your new follower :), but the code is no work for me,is it because of dynamic view? my blog http://www.klsebursamalaysia.com/

    ReplyDelete
    Replies
    1. Hello Ku Fwu Haur,

      Thanks and welcome, and sorry for the late reply. You're right - the code above is meant for non-dynamic templates. This should somehow help you. Let me know if you have further queries:

      http://www.southernspeakers.net/2011/11/change-blogger-dynamic-view-pages-link.html

      Delete
  37. Hi Yoga,
    I have tried to apply the above code onto my blog, but nothing is happening. I would love to change the font and background, and also add a drop down menu.
    The menu bar also starts too far left, so I'd love it if you could help me fix that too!

    I also have another issue: I can't see any 'Tabs text' or 'Tabs background' when I go to 'Customise' and then 'Advanced'...

    Thanks a lot in advance!
    Naïma

    ReplyDelete
    Replies
    1. Hello Naïma,

      Let's handle one at a time. First thing first, what's your blog's address?

      Delete
    2. Oops! It's http://mmegauthiersfrenchclass.blogspot.com and the template I am using is from http://misspicklesfreebie2.blogspot.com.
      Thanks!

      Delete
    3. Sorry for my ridiculosly late reply. I've seen your blog, but I don't see any pages gadget/tab menu in your blog. What am I missing?

      Delete
    4. Sorry, I couldn't look at it any longer so I removed it today :/ I'll put it back so you can see. Thanks for your help :)

      Delete
    5. Do you have a specific font/background color in mind?

      Delete
    6. Also if you're free to work on your blog for the next few hours (the duration for which I'll still be awake at this part of the world) I suggest we bring this discussion to the Blogger Help Forum - it'll make lengthy discussion a little easier to reply. Head over to https://productforums.google.com/forum/#!newtopic/blogger and get back to me once you've got your question published (with the URL).

      Delete
  38. Sorry Yoga, I've just had a crazy week, so haven't been able to work on my blog design at all :/
    I would like the background of my main menu bar to be the same black as my character's belt (#03030F), with an offset diagonal bottom right shadow effect (same as the footer). I'd love if I could have drop down options in color #2F2725 and a hover effect in deep pink on both main menu bar and drop down options (color: #FF6699) For the height, I'd like it big enough for the current font size I use for my sidebar titles. Text color: white; Font: Pompiere, bold, caps, 24 px
    Menu bar titles: symbol of a house for 'home' tab | FRENCH | ESL / EFL | SHOP | FREEBIES | ABOUT ME
    drop down options for SHOP: FRENCH | ESL / FSL
    drop down options for FREEBIES: FRENCH | ESL / FSL

    Sorry for the super demanding request... I hope that's ok. I'll be free in a few hours today, if that's any good, or we can work out another day at some point this week, if you prefer.
    Thanks again for your help
    Naïma

    ReplyDelete
    Replies
    1. Hello Naïma

      Let's bring it to the forum:
      https://productforums.google.com/forum/#!newtopic/blogger

      Get back to me with your forum link once you've posted your question.

      Delete
  39. this was really simple and very helpful - thanks! any idea how to change the pages gadget font size, too (without changing the default blog post font size)?

    ReplyDelete
    Replies
    1. Hello Om,

      This should do it:

      .PageList a{
      font-size: 10px !important;
      }

      Cheers!

      Delete
  40. Hii Yoga~ I love the tutorial created by you which contain both css and html. However, I've tried the code which you stated above and also lots of the solution from the websites as to create a pages gadget with hover and selected effect with image url but it failed. So, I'm here to ask some solutions from you. Really hope to hear from you~!!

    Thanks

    ReplyDelete
    Replies
    1. Hi Weiying,

      What happens when you try to use an image background via the tutorial above?

      Delete
    2. Hii Yoga~!! Thanks for reply~
      it doesn't appear, i only can change the color or the background. Is it possible to have such setting?? For example, image1 appear when it is hover and image2 appear when it is selected?? Thanks for help and reply~

      Cheers~

      Delete
    3. Technically, it is possible. I've written a tutorial where you can use images as your tab 'buttons', though in your case you want to use it as your background.

      What is your blog's URL? Is your code currently in place?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.