Monday, August 03, 2009

Change sidebar title background color

A blogger asked: "I want to add background colour to the sidebar title / header. pls show me the way.".

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:

.sidebar h2 {
etc. etc.
}

etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read

.sidebar h2 {
background-color:blue;
etc. etc.
}


If you cannot find

.sidebar h2 {
etc. etc.
}


Then just add this:


.sidebar h2 {
background-color:red;
}

(or any color rather than red or any other HTML color code

to anywhere before

]]<>/b:skin<


but preferably just after:

/* Sidebar Content
----------------------------------------------- */


so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:


/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}


Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Related post: How to change background color of sidebar

29 comments:

  1. Thank you for that excellent idea. and thank that user who asked for it too.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. I need your help I am unable to access I have read all the posts and followed the directions but still no luck getting it to work.

    http://americanartistsguild.blogspot.com

    I am trying to combine the two but I am getting bX-ywe5vw error

    I own the URL americanartistsguild.com and org

    I am trying to make a blog that the team can share thoughts but can't get it to be openable

    I initally created
    http://americanartistsguild.blogspot.com
    in 2005 and wanted to put a blog for a domain that I also own but didn't complete it . can you help me?

    Thank you

    ReplyDelete
  4. I am not sure if I understand your problem or what you want done. Perhaps you are trying to convert your blogspot blog to a custom domain?

    ReplyDelete
  5. Your blog is excellent for bloggers like us. Unfortunately, I couldn't find a solution to my problem. My side bar (profile, posts, etc) is missing. If you go to original blog address, the side bar is gone but then if you click on the blog title or the comment, the side bar will show up. But it still bothers me. I tried adding a gadget, changing the layout or even resizing the photo. Nothing. I didn't even touch anything It became suddenly like that. Hope you could help. Divina

    ReplyDelete
  6. I suspect your sidebar is not missing but have been pushed down to the bottom of the page. Give us your blog URL to confirm.

    If so, refer to Troubleshoot sidebar at bottom Part 3 or Sidebar pushed to the bottom of page (and more posts later if the above cannot solve your problem).

    ReplyDelete
  7. Hello Peter. The sidebar wasn't pushed to the bottom. I couldn't find it there. Here's my URL:

    sense-serendipity.blogspot.com

    Thank you.

    ReplyDelete
  8. If I am faced with a situation like this and I do not know how to fix it, I would just backup whatever page elements (gadgets) that can be backed up and reload a fresh template

    ReplyDelete
  9. Well...it kinda worked. The backgrounds on the titles of the elements in my sidebar is now black, but the rest is clear, so that the background image for the whole blog is visible through it. I have a repeating pattern background, but I'd like the widgets and comment area to have a black background, so it can be read. Can you tell me how to make the whole sidebar have a background color? Thanks!!

    ReplyDelete
  10. Hope you are doing good.
    I have a doubt regarding footer title background. I divided footer into 3 columns. I want to give background color to footer titles. I have succeeded in implementing this to main section following your tips. But I did not get any clue to implement the same to footer titles. pls guide me.
    Thanks
    college2job.blogspot.com

    ReplyDelete
  11. I did a bit of testing. View this blog's footer Pets amd animals with Internet Explorer and Firefox. You will notice that the footer titles ("Our Sponsors" and "Visitor counter") is visible in Firefox, but not visible in Internet Explorer.

    ReplyDelete
  12. Hi Sir..
    I checked your blog 'pets and animals'. But there is no background for footer titles (visitor counter and our sponsers). I hope you get my question properly. pls check footer section of helpbiotech.blogspot.com. I am asking for that kind of background for footer titles.
    thanks
    college2job.blogspot.com

    ReplyDelete
  13. Didn't work for me. Can you take a look and tell me what the problem might be? http://www.campfireplace.com.
    Thanks.

    ReplyDelete
  14. Hi Peter,
    Thanks for your prompt response.
    But I could not able to get it done. I have tried the code...

    .footer h2 {
    background-color:#FFAA2A;
    }

    at almost all places in footer section of my blog html, but in vain. pls visit my blog: college2job.blogspot.com. please suggest me exact placement of code. thanks a ton college2job.blogspot.com

    ReplyDelete
  15. Hi Peter,
    hope you are doing well.
    html for footer title background is not working for my blog.
    I have tried this html as suggested by you....

    .footer h2 {
    background-color:#FFAA2A;
    }

    pls help me.. i want footer title backgrounds as like in your pets and animals blog. I am using 4 column template (with 3 column footer). pls suggest me exact placement of the code.
    thanks
    college2job.blogspot.com

    ReplyDelete
  16. Hi
    This html code (for footer title background) is not working for my blog. I tried this so many times but in vain.
    my blog www.college2job.blogspot.com
    pls check this code once.
    Thanks

    ReplyDelete
  17. thanks for sharing

    ReplyDelete
  18. it doesnt work for me ..
    please..

    it shows..

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".
    Error 500

    how do i solve it?

    ReplyDelete
  19. Try following the instructions exactly as the message says something wrong with the CSS

    ReplyDelete
  20. Hello Peter in my blog .sidebar h2 { is missing and also ]]<>/b:skin< please help me i want to add icons before my label text...please dear
    http://links4pk.blogspot.com/

    ReplyDelete
  21. DO THIS IN A TEST BLOG WITH THE SAME TEMPLATE!!!!

    Look for </style> instead /b:skin

    ReplyDelete
  22. thanks for the above tip but i was not able to find .sidebar h2 in my blogger code

    Instead i found the below code

    /* Headings
    ----------------------------------------------- */
    h2 {
    font: $(widget.title.font);
    text-transform: $(widget.title.text.transform);
    color: $(widget.title.text.color);
    margin: .5em 0;
    }

    another thing to tell
    i found this code in html

    .main-inner {
    padding: 15px $(main.padding.sides) 20px;
    }

    .main-inner .column-center-inner {
    padding: 0 0;
    }

    .main-inner .column-left-inner {
    padding-left: 0;
    }

    .main-inner .column-right-inner {
    padding-right: 0;
    }

    under the code that says

    /* Main
    ----------------------------------------------- */
    .main-outer {
    background: $(main.background);

    Help me with this, i want to change my side bar colour you can see my blog here mentalmathstrick.blogspot.com for more detail

    ReplyDelete
  23. Hello ;) I am using the theme Atuhalpa for blogger, and it's a custom template. Your guides are easy to understand and follow, but I can't find the code that you said. Pleas help? URL is http://www.clubpenguinfreaks.com/

    ReplyDelete
  24. The person you should consult should be the creator of the template as it is not a standard template

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics