Saturday, November 24, 2007

Change main background color for Rounders template blogs

A blogger complained in my post How to change blog background color, fonts, etc that she could not find the option to change the main background color. I check the only blog I have which uses the Rounders template - Kids and teens - Tips and Tricks and confirmed that there was no option to change the main background color.

So while signed into my Blogger account and at the blog, there should be a "Customize" link at the top right corner of the page. I clicked "Customize" which gets me into the LAYOUT. I click the EDIT HTML sub-tab which opens the template editor. I found this code in the CSS (Cascading Style Sheet) of the template:

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">


and changed value="#ffffff" to value="#000000", preview and saw that the left sidebar and the main column (posts) background have changed to black. The right sidebar color remained original. So I discovered a way to change the main background color. However, since I have no intention to really change the color, I just click "Clear Edit" to get rid of the change and left the blog as it is.

If you want to learn more about HTML colors codes and how to get them, refer to HTML color codes, color charts and color pickers

If you have intention to change, perhaps you should also changing default="#fff" to some other color (note: the HTML color code #fff in this case contain only 3 alphabets {it can also be numeric}, but you can put either 3 or 6 alphabets or numerics or combination depending on what color you want, preview and see what changes you get. I have no interest, so I did not try.

IMPORTANT: It is always wise to backup your current template PLUS any Page Elements that can be backup before you tamper with the template. See Backup template PLUS Page Elements and edit template.

Peter Chen's nice graphic signature

16 comments:

  1. Hi Peter,

    Great blog! My question which no one has been able to answer so far :(

    Can l have a separate date stamp for each and every post, even if the posts are written on the same day?
    Right now, several posts written on the same day share only one date header.
    l would like a separate date-time header for each and every post.
    I have tried mucking around with the xml but I am beginning to suspect this is only doable in the programming codes. What say you?

    ReplyDelete
  2. Hello,

    I just came upon your blog while trying to find smiley code for HaloScan.

    I am having a minor problem with the rounders-3 template. I have changed the background color for my title block and side bar but this has left "ghost" images of the rounded corners of the original title block.

    My code for the color is: (Tags removed)
    Variable name="titleBgColor" description="Page Header Background Color" type="color" default="#357" value="#000000"

    This was the only change I made regarding the layout beyond the standard features under the fonts and colors tab.

    Any Ideas how to cure this?

    BB2
    http://bluebear2.blogspot.com/

    ReplyDelete
  3. I cannot tell you how excited I am to have found this blog. I am very new to blogging and an absolute idiot when it comes to HTML. I can tell that this is going to be a very valuabe resource for me! Thank you, thank you, thank you!!!

    ReplyDelete
  4. Hi Bluebear2,

    Don't look like I can help you plus I have too many things to attend to to really look at your problem and even then, not sure if I could be of help.

    Peter Blog*Star
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  5. uncle: i have a question, why does my font size tend to becom smaller and smaller from a post to the antoher in some web browser? what happen to my font code??

    What is Doctype actually means? thanks. Can reply in this comment box.

    ReplyDelete
  6. That's ok - it's a very minor annoyance and most people probably don't even notice.

    I have however bookmarked your site for all its other valuable information.

    Thanks for getting back to me.

    ReplyDelete
  7. Hi Johnson,

    Regarding fonts, suggest you call in the Ghost Busters.

    Doctype is a declaration of what type of HTML is used to display the website I think and is needed at the top of all source code of web pages.

    Peter Blog*Star
    Alternatives to Google AdSense

    ReplyDelete
  8. Hello Peter! Do you still remeber me?

    Off topic question. I recently changed my URL, what can I do re my technorati acct, right now I have 2 addresses of the same blog. I have no idea how to edit my setting so that the authority does not drop back to zero.

    Kindly check my new URL
    http://blackbaies.pansitan.net/
    Here's my technorati profile as well.
    http://www.technorati.com/people/technorati/blackbaies

    Please help. I really have no idea what to do next.

    Thanks in advance :)

    ReplyDelete
  9. Hi Cosmijunckie,

    Regarding separate timestamp, I doubt it is doable as that is controlled by the Blogger script for post, and I don't think I want to try. No time.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  10. hi please help me i don't know how to alternate between two background colors from article to another ?

    (Perhaps by adding a new css class ?? )

    Thanks a lot im a frequent reader of your great blog ;)

    ReplyDelete
  11. Hi Shmuel & Daniel,

    I don't think that is possible unless you do it on different blogs.

    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
  12. Hi! I Googled for "blogger rounders background" and reached your tip. However, it doesn't change the main background colour, which is that grey/blue colour. So I'm looking further...

    Just so you know though.
    Cheers,
    Patrick

    ReplyDelete
  13. Hi! I actually come here all the time for some great tips! I did actually try this and nothing happened but I messed around with it and learned an easier way to change not only the background color but also to add an image.

    Save template. Expand widget. Look for this code near the top:

    body {
    background:#ccc;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:#000000;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    Change #ccc to color of choice.

    To add an image to background instead of color: Save template. Expand widget. Look for:

    body {
    background:#ccc;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:#000000;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    Change to:

    body {
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$(body.text.color);
    background: url(pic url);
    padding: 0 repeat fixed center center
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    You may need to change sidebar sides depending on background choice or at least I did anyway.

    If you have questions:
    kitt.paperbackdolls at yahoo dot com

    I'm a noob blogger learning java on my own and run a review site.

    ReplyDelete
  14. body {
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$(body.text.color);
    background: url( freedownloadgamesforpc.blogspot.com/style.css );
    padding: 0 repeat fixed center center
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    Can I Have Css Instead Of Image As A Repeat Background.

    ReplyDelete
  15. Very enlightening stuff.

    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