Feb 23, 2009

Adding A Background Color To Your Gadgets

We've covered how to change and remove borders in your Blogger blog and how to add a background-color to your sidebars. In this example I'll cover how to add a background-color to individual gadgets in your sidebar.

Step #1:
Backup your template or better yet try this first on a test blog before doing it to your blog. The first thing you do is located the id of the gadget/widget you'd like to add a background color to. To find the gadget scroll down your template and find the "div" for the particular gadget. In this example it looks like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='Text' type='Text'/>
</b:section>
</div>


Text1 is the name of the text gadget in my sidebar I want to add a background-color to.

Step #2:
I create an area for these decorations so I know where to place them and find them should I ever want to change or remove them.

/* Decorations
----------------------------------------------- */
#Text1{
background-color: #DDDD99;
}



This is what the example looks like on a blogger template I'm customizing for someone.

add a background color to sidebar gadgetsThe ocher square you see in the sidebar is the Text1 gadget/widget. We can also add borders to particular gadgets/widgets like I did in this example, just find the gadget/widget id and create a style for it. This is what those two decorations look like in the template:

/* Decorations
----------------------------------------------- */
#Text1{
background-color: #DDDD99;
}
#Text2{
border:3px dashed #DDDD99;
}


Text1 just has a background-color, but Text2 has a border around it. You can do this for all the items in your sidebar, just locate the name for them and decorate them however you want. Once you're done preview it to make sure you like it and you have done it correctly and then save.

9 comments:

  1. This is right on track for what I am hoping to accomplish with this blog I am slowly using the record trips: http://nycsite.blogspot.com/.
    However, I can't seem to get it to work.
    I use the "linklist" title of the widget instead of your "text1" and place the decoration section at the bottom of the html. No color and now this text shows up. Take a look if you have a moment. Thanks!

    ReplyDelete
  2. Actually, what am I trying to do is add a background color to only the Sidebar Title area. (I was able to get the background color for the whole are working.)

    ReplyDelete
  3. Can you please tell me where exactly should I put the code for each gadget border and /or background color, because I tried different places and nothing worked?
    Thanks.

    ReplyDelete
  4. I would like to know where exactly do you insert the code below? Before or after which code? thanks:

    /* Decorations
    ----------------------------------------------- */
    #Text1{
    background-color: #DDDD99;
    }
    #Text2{
    border:3px dashed #DDDD99;
    }

    ReplyDelete
  5. M,

    Sorry for the REALLY late reply but it depends on the template you are using. For example: this is what the colored sidebar title looks like in the Denim template.
    ----------------
    .sidebar h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: ADD COLOR HEX CODE HERE;
    font-size: 100%;
    color: ADD COLOR HEX CODE HERE;
    }
    ----------------------------------------

    If the template you are using doesn't have .sidebar h2 you could just copy/paste it from a template like Denim.

    Alien,

    If you want to create a background color or border for individual gadgets you'll have to add them by hand as explained above. See also my reply to Beatha.

    Beatha,
    Paste it anywhere in your template before the Footer CSS that starts with this line:" /* Footer
    ----------------------------------------------- */"

    ReplyDelete
  6. Thanks a lot, you are very helpful.

    ReplyDelete
  7. Thanks for the help...I have put in the code and I see the color change for a second when previewing and then the original color shows again - is there something I need to remove?

    ReplyDelete
  8. Lisa,

    Sorry for the late reply. I looked at your blog and it looks like you're using a third party template. It may have something to do with the code of the template you chose. Check with the designer of the blog template you're using.

    ReplyDelete
  9. how can i change the background of sidebar?
    i use simple background

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.