Saturday, August 11, 2007

Change background color of New Blogger sidebar

A blogger commented that he could not find the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}

You can see the result at Standard Blogger Scribe Template.

BTW, instead of using hexadecimal color codes like #FFFFFF, you can also use most names of colors like red, blue, white, etc. If you want to blend the color to the colors of the site, try typing the search term "colorpic" or "iconico colorpic" into the search box above, tick ( ) Web radio button and search, and I am sure you would see the link as the first result in the SERP (search engine result page) to download a very useful tool I use to get the color code of colors on any website. (I don't want to put too many outbound links as I understand outbound links can lower your PageRank).

I also find
Color Blender very useful if I want some "in-between" color or colors. If anyone is interested on how to use that site properly, just make a comment and I will do a new post on how to use it.

Related post:
How to change sidebar title background color
How to add background image to sidebar

49 comments:

  1. I'm having trouble implementing this with my template called 'Sand Dollar' by Jason Sutter.

    My site is www.animeclassicreviews.com and I would like to change the sidebar from pink to a different colour.

    ReplyDelete
  2. Hi Area88,

    Which one? The standard Blogger 2 column Sand Dollar template or the modified to 3 column you find at New Blogger 3 column templates modified by Stavanger?

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  3. Thanks For This Post ,I had a same Problem @ http://mydzi.blogspot.com Now I have fixed It.
    Thanks Peter

    ReplyDelete
  4. Hi Peter,

    You are obviously experienced in the technical side of blogging, 'm just a writer at this stage.

    Could you help me out by explaining in steps how to add:
    links, buttons, banners,Kontera and other things

    Cheers,

    Peter Petterson

    ReplyDelete
  5. Hi Peter Paterson,

    You could have explained in greater details about what you want - Asking for help

    In any case, see if these posts will help:

    For links, refer to
    How to make a clickable link
    How to make a Link List
    Adding a Link List to your sidebar
    How to add a Link List to the sidebar
    LINK LIST - What it is and how to use it do what you want
    How to change color of your hyperlink
    How to add list of links to your post
    How to link a particular spot on a page to another particular spot in the same page
    Link a particular spot on a page to another particular spot in a different page
    Make links open in new window
    Make permalink (timestamp) more prominent

    For banner, I assume you want it in the Header. Refer to
    Add graphic, advertisements, banners, search box, etc. to blog Header
    Clickable graphic in post title
    Another way of adding graphic to your blog Header
    Add graphic the easy way
    Special fonts for your blog clickable graphic Header without removing the important text blog title

    If you want the banner in the sidebar, it will have to be narrow enough to fit into the sidebar width
    How to put clickable picture or banner in the sidebar

    For Kontera. refer to
    Earn with Kontera ContentLink ads
    Not finished yet. It is now 12.53am and time to sleep. Will complete it tommorrow, But I think it have enough already for you to do something.

    Any furthre difficulties, comment in the post.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  6. I couldn't get that to work. Is there something else I should change? thanks

    ReplyDelete
  7. Hi, I've having trouble changing my background~ using the new blogger minima's template, have been trying for the past 4 hrs, to change the background to an image i want, but no matter how i try, the change juz doesn't show in my blog. is it gotta do with new blogger? it's really frustating~

    ReplyDelete
  8. heya, still doesn't work, have cleared cache, installed firefox, refresh~ etc... none works..thanks for the help~ :)

    ReplyDelete
  9. Hi Maddie,

    Hard to understand why it didn't work for you. Are you sure you saved the edited template?

    Important reminder: Backup current template PLUS Page Elements, then edit template.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  10. yes, i did, even published it~ nothing happens

    ReplyDelete
  11. Hi Maddie,

    Looks like you got to call in Ghost Busters. Or try your luck with Blogger Support. Or perhaps look for an expert in Blogger templates.

    Peter Blog*Star
    Blogger Dough, a temporary blog for bloggers who want to earn from their blogging efforts until final website ready

    ReplyDelete
  12. Hi, how do I put in a photo of mine which is already in the photobucket, in my blog as background? i want it to repeat again as the picture is small.

    ReplyDelete
  13. Hi Andy,

    Please refer to Background graphic for your blog.

    In your case, you can skip the section about getting the photo URL from Page Source and straight away get the photo URL from your free Photobucket image host account.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  14. hey peter...how do i make my blog body transparent/translucent so that the background image can be seen below the posts???

    ReplyDelete
  15. Hi Mith,

    You don't need to make the body transparent. Just make the image as background image

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions)
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  16. Hey Peter, How are you?

    I am having a problem with my blog. I am a first time blogger and having a lot trouble. I can't figure out how to get a picture as my blog's main background. Help me please.

    Thanks
    tpan14

    ReplyDelete
  17. Thanks - that was simple and it worked perfect!

    http://braintwinkey.blogspot.com

    ReplyDelete
  18. I used to be able to make a patterned background on my blog by adding the URL of a pattern in my Picasa web site after the code for the background color. But this doesn't work any more. I do change templates a lot. I am currently using Rounders 2.

    ReplyDelete
  19. Rounders is a tough template to customize because it comes with a rounded corner background image

    ReplyDelete
  20. Thanks - that was simple and it worked perfect!

    ReplyDelete
  21. Hi Peter,

    I tried this code with my harbour 3 column template but it didn't work.

    my blog; www.parentclub.ca

    any tips would be appreciated!

    ReplyDelete
  22. I visited your blog and saw that you are using a modified 3 column Harbor template. I also noticed that the background color of the 2 sidebar is blue which is not the default color?

    ReplyDelete
  23. your blog posts are so helpful! I finally got the back background (that i created in photoshop) to be my blog background. Yippie. But it's the zoomed in version of the background i made. When i tried just to adjust the size, it didnt even cover the screen. I'm guessing i have something goofy in my code. i'm using...

    body {
    background:$bgcolor;
    background-image:url("http://i235.photobucket.com/albums/ee296/makeupbykatie/twinkle.jpg");
    background-position: center;
    background-repeat:no-repeat;
    background-attachment: fixed;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;

    likewise when i've tried altering it (with my little html mind) i end up making the backgroudn disappear. What am i doing wrong?

    Katie - makeupbykatie@yahoo.com

    ReplyDelete
  24. woops, forgot to click the followup comments button

    ReplyDelete
  25. You seemed to have it figured out at Created by Katie Cotton. So what is wrong with it?

    ReplyDelete
  26. its only showing the middle portion of the background i created. i tweaked the background a bit and just moved everything (extra icons, words, etc) into the center so everything could be seen but it's still like i was looked at the photoshop file and then zoomed in so i could only see the center and much larger.

    Does it just always do that? Ideally i wanted what i could see as the pciture to actually be the background instead of just the center.

    Do i even make any sense? haha.

    ReplyDelete
  27. From what I remember of the image for the background, it is blank in the middle with 2 "curtain" on both sides and that is what you have in one of your blog Created by Katie Cotton with the 2 "curtain" on both sides and the content of your blog in the middle. Isn't that what is intended?

    ReplyDelete
  28. yes, thats the picture, but there is more that isnt seen. I moved the stars up so they "look" like they are at the bottom but now in photoshop the stars are actually about a third of the way up the page. If i didnt move them up, they wouldnt have been seen at all.

    ReplyDelete
  29. My blog is: http://www.thatwemightbeadopted.blogspot.com/
    I recently 'widened' my background using tips from Blogger. (I know NOTHING about html code.) But as you can see, there is a 'layer' of the background that still needs to be adjusted and I don't know how to find that in the code to change it. I can send you the code if necessary. Thanks for any help you can give me!
    Becky

    ReplyDelete
  30. Are you referring to that graphic for the blog Header?

    ReplyDelete
  31. Hi Peter. Could you tell me how I can change the sidebar background color in snapshot? I was able to change the main background but can't figure out how to change the sidebar background (it's currently white). Thank you!

    ReplyDelete
  32. Hi Peter. Can you tell me how to change the sidebar color in snapshot? It's currently white. Thank you!

    ReplyDelete
  33. Change sidebar background color? Isn't this post about changing sidebar background color?

    "change the sidebar background color in snapshot?" What snapshot?

    ReplyDelete
  34. Thank you so much Peter. No more white sidebar! I would love more info on color blender however, if someone hasn't asked already.

    ReplyDelete
  35. Hi Peter
    I am using 3 column footer. I want to change footer title background color. can you pls help me? your earlier suggestion
    .footer h2 {
    background-color:#FFAA2A;
    }
    is not working for my blog college2job.blogspot.com . please help me.
    Thanks

    ReplyDelete
  36. Thank you SO much for this post; I've been searching high and low on how to do this. :)) I tried doing it myself but I always ended up typing in the wrong values. Thanks again! :D

    http://onegoldenafternoon.blogspot.com

    ReplyDelete
  37. Hi Peter,

    your blog posts are really helpful! Could you tell how can I add a background image on my sidebar?

    ReplyDelete
  38. Hi Peter,
    a friend of mine has the problem, that he wants a picture in his sidebar as a background. This worked out, but now it doesn't stretch long enough for two post.
    Could you help us?

    ReplyDelete
  39. Add the following attribute:

    background-repeat: repeat-y;

    ReplyDelete
  40. Hi Peter hope you are well I have a big favour to ask of you I have a template for blogger and I want to get my template to look like this

    osterblenderparts.net


    I found how to change the header from red to green and even to black but the problem is changing the sidebar on the right to all black


    please help here is the template currently as it is Im using it on

    practiseblogging.blogspot.com/

    I would appreciate it a lot Peter if you could help me out.


    Regards

    ReplyDelete
  41. thanx
    great article
    if anyone find nay problem the visit:
    http://internetricks4u.blogspot.com/2011/07/how-to-change-sidebar-title-background.html

    ReplyDelete
  42. This post very important. Thanks for giving these information.

    ReplyDelete
  43. thank you so much for the information. when i have a free minute, i am going to try. so good of you to help us all out!
    sophie

    ReplyDelete
  44. i've tried everything. CSS,Advanced html etc Still stuck with this outer border that goes into the sidebar- has this light green tint.I am trying to use a light tan #F6CCC0
    http://amen-totustuus.blogspot.com/

    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