Wednesday, July 11, 2007

Change background color or image of main column of blog

Update 2011: With the new Blogger Template Designer, changing the background is now a breeze. Just sing into
DASHBOARD > DESIGN > TEMPLATE DESIGNER > BACKGROUND
and change the blog background according either color or image. If this option is not offered you will either have to stick the old method of changing background described below or change to a Template Designer template.


Blog reader asked this question and I figure I might as well answer in a post.

Add/Change background color of main column (posts)

To change the background color of ONLY the main column (posts), sign into Dashboard, click LAYOUT (now called DESIGN) in the section for the relevant blog, click EDIT HTML sub-tab to open the template editor window. Look for this block of codes in the template:

#main-wrapper {
width: 410px;
float: left;
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 */
}


(This is for the standard Blogger Minima template. Wordings may be slightly different for different template but will be mainly similar)

Add any of this to the block of codes:

background:pink;
background:blue;
background:#D4FFFF;
etc.

The last will give you a greater choice of color. For the last example which use HTML color code, you can get much help using the free ColorPic tool. I used it frequently. You can Google for it by typing the search term "colorpic" or "color picker" into the search bar above (tick "Web").

After addition, the block of code may now look something like this:

#main-wrapper {
background:#D4FFFF;
width: 410px;
float: left;
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 */
}



Add background image to main column (posts)

Do exactly as above, but this time, upload the image to the web either using the free Photobucket or use Blogger to host the image as described in this post Use New Blogger to host your pictures for the profile photo, sidebar, blog Header, etc.. Get the photo URL.

Then add this line of code into the blocks mentioned above:

background: url(photo URL);

So the block of codes become:

#main-wrapper {
background: url(photo URL);
width: 410px;
float: left;
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 */ }



If add a background image, you ask yourself if it will increase loading time too much, weather text and other images will be visible or look good with it, etc. Not everyone is on broadband. Some still use dialup

40 comments:

  1. Thank you so so much Peter for again being such a great help to all us Bloggers, and you did it so quick in less than 12h!
    I will try all this and will let you know how I went.

    ReplyDelete
  2. Thanks.

    Is there any ways to create a colour changer icon on the blog's main page. Readers could simply click on a particular style they like. I remember seeing this on a blog platform (not Blogger though).

    ReplyDelete
  3. Hi Peter,
    I actually stumble to your blog from whozontop.com.

    I don't know if this is the right place to leave comment, but i have been browsing through your blog from months to months, year to year.

    Often when i open two window of your blog, a pop-up window comes up and ask me to close. Is this coming from your end? or mine ?

    And also you are doing a good job on this blog !! It is really great tips and tricks haha.

    ReplyDelete
  4. Hi Jaklang,

    "I actually stumble to your blog from whozontop.com"

    That is nice to know, but I check that site but don't see any link to my blog. Was it through a search? If so, what search terms did you use?

    I frequently visit my own blogs and so far had no pop-ups of pop-unders. I know sites like bravenet when you use their stuff will cause your site to have pop-ups but because of their reputation, I never use anything from them.

    Anyway, I will check with some people to see if they get any pop-ups.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  5. Hi Jaklang,

    BTW, can you can remember whether you visit the main page or a particular post when you got the pop-up?

    Anyway, when I get things like these which sometimes you can't close (clickin on the [x] actually cause you to get what the pop-up wants you to get), I press ctrl+alt+del to get the task manager, and if I see that particular program that is giving the pop-up, I end that task.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  6. Hi Peter,

    I think its only for one particular post.

    I was opening up one of your post from April 2007 and the pop-up is from Windows itself.

    I only clicked form the sidebar, on April month and that window pop-up saying encounter problem.

    Regards,
    jaklang
    Online poker jottings
    www.pokerpostings.blogspot.com

    ReplyDelete
  7. Hello Peter . I am a blogger from India . I have one question . Could you please tell me how you posted the
    HTML/Javscript on your post Incorporate AdSense ads in post and wrap text around ad with the side scroll button .

    ReplyDelete
  8. Hi Henry,

    You mean the scroll box? Refer to Make a scroll box. I remembered I did 2 posts for scroll box, but could only find one. If you don't find what you need in the above post, you will have to email me.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  9. thanx for that.But still couldn't work it out .

    ReplyDelete
  10. Hi Henry,

    What is the problem? Try to describe what you tried to do. Perhaps, rather than giving you so many choices, concentrate on the last part of the post Make scroll box (the update).

    Or is it that you are trying to display HTML codes but they are not visible. For that, you will have to refer to How to display special characters.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  11. Hi Peter,
    I thought I'll just let you guys know, I DO NOT get any pop ups on my side so all seems ok when I visit your blogs!

    ReplyDelete
  12. Hi Gramma,

    Thanks for taking the trouble to give feedback and giving the OK. Helps me sleep better.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  13. Hi Jaklang,

    Regarding the pop-ups, I have check with a number of people, including someone from Blogger, and all said they didn't get any pop-ups. I hope you haven't installed anything from Bravenet as they are notorious for putting pop-ups on your site if you use any of their applications. Also, I think you need to check your computer for viruses.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  14. Hi Peter, i have launched a french blog about tips and tricks for blogger (a bit like your's) and sometimes i teach some of you tricks (and i don't forget to make a link to your original post).

    So I just want to ask you a link exhange (a link in your homepage and a link to you in my home page).

    If interrested, just say yes to this comment

    ReplyDelete
  15. Hi Rodney,

    I have added a link to your blog at the first left sidebar of Blogging Ideas, under the category "Blogger Resources", somewhere in the middle of the list.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  16. Thank peter,

    Now you can see the link at the first side bar, under "blog à visiter".

    I didn't know that you had also this blog where you refer to mine. I'm quickly going to check it and again great thank for all the tips and tricks that you give us.

    ReplyDelete
  17. Hi Peter

    I tried to implement your method and it worked well. The only glitch is there's now a white blank space in the side of the main column.

    Check it at my test blog
    http://laladuh2.blogspot.com/

    There's a white space in the left and the bottom of the main column. I tried to change the color of the second column ( the right one) and the tiny space still exist in the right and the bottom of the right bar.

    Do you know any workaround ?

    Thanks in advance

    ReplyDelete
  18. Hi Cherry,

    I see you are using a third party template. I am afraid I don't know what is the problem and don't have the time to check. I am preparing to speak at the Parliamentary Roundtable on the Islamic state issue of my country. Perhaps you can try Google Blogger Help group.

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

    ReplyDelete
  19. I managed to change the b/g by changing the background color. Had to make a matching photoshop image for the background.

    ReplyDelete
  20. Dear Peter
    Please advise me as to how to change the color of the sidebar (in my blog it is light blue). Try as I might, I dont see the sidebar background color code in the template. Also, is it possible to give a space between the main wrapper and the sidebar?
    Thank you
    Eternalsoul

    ReplyDelete
  21. Hi EternalSoul,

    Please refer to Change background color of New Blogger sidebar.

    Regarding space, you may have to deal with paddings. I am not so familiar with that. Perhaps you can try the Google Blogger Help group.

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

    ReplyDelete
  22. Hi Peter!
    I've just found your great site while searching for ways to change the page background colour of my 3-column rounders template.
    I guess I've chosen the only one that doesn't allow the changes from the fonts and colours drop-down, but do you have any hits or tips?
    It's easy enough to change everything else, but I'd really like to change the colour of the actual page behind the side and main bars. Hope you can help!

    ReplyDelete
  23. Hi there Peter! THanks for that! I'm actually looking to change the background page, BEHIND the sidebars. There is no option to change this on the colour/font edit, and I wondered if you knew of an html edit that would help?!
    cheers, redscot

    ReplyDelete
  24. Hi Peter!
    Thanks for that! I'm actually looking for a way to change the background page colour BEHIND the sidebars. There's no option for this in the colour/font edit page, and I was wondering if you knew any html code to insert to change this? At the moment it's a pale green... (If that helps if you look at the blog again?!)
    Cheers! RedScot

    ReplyDelete
  25. Hi RedScot,

    Wonder if you saw my response above. Anyway, maybe what you need to do since you don't want a background image but want to change the background color of the sidebar, either look for a screen with the color you want, printscreen and paste the screenshot into your photo editor. You can also create new images with the color you want with my favorite free Irfanview photoeditor. If you don't know how to do that, comment in that post and I will see what I can do.

    Once you have an image with the color you want, then you can use Background image for blog sidebar.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  26. Hi again!
    I did see your post! You are a star for spending time on this! Thank you so much for helping!

    Sorry - I'm not being clear at all! The problem is that I don't want to change anything about the sidebars at all - it's the page background that has no choices for editing in the Rounders template and it's the actual PAGE background I'd like to change, which is a nasty pale green - I've managed to change everything else already!

    I tried to add some code to add a page colour option, but it didn't work at all, but there must be a way! Thanks again, though!

    ReplyDelete
  27. Hi RedScot,

    When you mention a nasty green, you must be referring to Rounders 4 template, which have rounded borders and are hard to deal with. Actually Rounders 4 is the perfect template in my opinion for environmental blogs and happened to be the original template for Environmental blog: Enviroman Says until I added an environmental cartoon which caused me to change template. I have used a Rounders 4 template modified to 3 column for Environmentally friendly presents (gifts).

    You will have to get into the template and substitute some image URL with images with the background you want, but unless those images of yours have rounded corners, your blog will look odd. You may find some hints as to how to do that in New Blogger template by Blogger Buster.

    My suggestion to you is, if you don't like the color, use a different template. You may find one suitable at New Blogger templates, mostly 3 column. What you want done will be tough.

    Peter Blog*Star
    Temporary blog for bloggers who want to earn from their blogging efforts until final website ready




    image URL

    ReplyDelete
  28. Many thanks Peter, I'll see if changing some URL helps!

    ReplyDelete
  29. Red Scot said: "I'm actually looking to change the background page, BEHIND the sidebars."

    Sorry missed your earlier comment as no email notification was received. Comment approved from Dashboard.

    Try these:
    How to add background picture to the sidebar
    Change background color of New Blogger sidebar

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

    ReplyDelete
  30. dude, it didn't work. i did exactly as you said, put the url and everything but it's exactly the same. :S and for some reason my side bar went to the bottom of the page. Help, man!

    ReplyDelete
  31. Thanks! Your instructions were very easy to understand.

    ReplyDelete
  32. Graet sharing.
    Useful instructions shared.
    Thanks.

    Regards,
    business logo design

    ReplyDelete
  33. Hi, I tried this and it didn't seem to work for me, or it's changing the colour of something else...this is my blog www.rehminisce.blogspot.com and i'd like to change the white bit to the light pink colour that's everywhere else...i don't have a 'layout' tab, i have a design tab though...thanks for your help!

    ReplyDelete
  34. LAYOUT is now called DESIGN. Looks like I will have to update post

    ReplyDelete
  35. Hi Peter! Thank you so much for this post! Not exactly the answer but it certainly gave me a clue to my answer!

    I'm currently playing with all the htmls on my new layout that I just picked and literally just tried to change all colors I can see one by one but couldn't get this particular section of the blog's color code! The -wrapper sure is the clue! You've saved me a lot of time man!

    ReplyDelete
  36. I find the easest thing to do is go into design, advanced and click the arrow on the right of the color background and upload your own images...no need to play with the HTML codes. Very simple...took me a bit to figure it out. :)

    ReplyDelete
  37. This post is dated July 2007 and thanks for reminding me this post needs updating.

    ReplyDelete
  38. Thank you very much !

    I added an image as background to the main column successfuly,
    but I wonder how to disable auto repeating?

    and when I try to add " none repeat " after " url() "
    , the image is disappearing.
    can you help?

    ReplyDelete
  39. Can't you use the new Template Designer for this task?

    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