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
Find help, info, instructions, tips, tricks
Saturday, August 11, 2007
Subscribe to:
Post Comments (Atom)
44 comments:
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.
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)
Thanks For This Post ,I had a same Problem @ http://mydzi.blogspot.com Now I have fixed It.
Thanks Peter
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
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)
I couldn't get that to work. Is there something else I should change? thanks
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~
Hi Maddie,
Hope this can help:
What to do when you don't see changes in template displayed, etc..
Me, I have 6 browsers, 5 of them opened now:
Why you should be using more than one browser.
Peter Blog*Star
Digital Candlelight Vigil
heya, still doesn't work, have cleared cache, installed firefox, refresh~ etc... none works..thanks for the help~ :)
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
yes, i did, even published it~ nothing happens
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
Hahahha~ yeah~
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.
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)
hey peter...how do i make my blog body transparent/translucent so that the background image can be seen below the posts???
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)
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
Hi tpan,
Refer to backrround for graphic
Thanks - that was simple and it worked perfect!
http://braintwinkey.blogspot.com
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.
Rounders is a tough template to customize because it comes with a rounded corner background image
Thanks - that was simple and it worked perfect!
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!
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?
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
woops, forgot to click the followup comments button
You seemed to have it figured out at Created by Katie Cotton. So what is wrong with it?
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.
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?
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.
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
Are you referring to that graphic for the blog Header?
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!
Hi Peter. Can you tell me how to change the sidebar color in snapshot? It's currently white. Thank you!
Change sidebar background color? Isn't this post about changing sidebar background color?
"change the sidebar background color in snapshot?" What snapshot?
Thank you so much Peter. No more white sidebar! I would love more info on color blender however, if someone hasn't asked already.
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
thank you!it worked.
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
Hi Peter,
your blog posts are really helpful! Could you tell how can I add a background image on my sidebar?
Refer to How to add background image to sidebar
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?
Add the following attribute:
background-repeat: repeat-y;
Post a Comment