A Widebar Category Cloud and Sidebar Background Colors (From My Inbox)
Annie, i just discovered you and Girl, you are amazing! N one makes CSS understandable but you manage to :)
I've retired my yummy PSYCHO template because I can't use it with new Blogger and it's impossible to change. So, I learning to design my own and finding your BlogU so great. I have a couple of questions for you, if you have time, before I get started tweaking my template.
1) How did you make your category cloud one big space above the two sidebars?:)
Use a Widebar to hold your category cloud! And while you're at it, set your sidebars apart with a different background color.
2) Could I create background images for the sidebars? Or how would I make them a different color than the main part?
I hope you can answer these, but if not, I totally understand you're flooded with "help me" emails.
Blessings,
Heidi
1. How did you make your category cloud one big space above the two sidebars?
Follow the instructions on this post: A Widebar - Fluid Style which creates a new page element. You can add the label cloud there. (here is how to get the cloud My Category Cloud...Finally
2. Could I create background images for the sidebars? Or how would I make them a different color than the main part?
First, create a Variable definition:
Variable name="sidebarbgcolor" description="Sidebar Background Color"Make the color anything you want.
type="color" default="#fff" value="#eeeeee">
Second, put the above code in the
/* Variable definitionsarea of your template.
Third, to your #sidebar-wrapper add this code:
background:$sidebarbgcolor;That will change the color of the sidebar.
Labels:
Blogger Beta,
Categories/Labels,
Design,
Navigation,
Reader's Emails,
Sidebars
9 Comments:
Thanks so much for the tutorial! I think I'll experiment with using the Widebar for "About" info, since I want a lot of info there.
Can I add a graphic as a sidebar background? I can't decide if I'd like to use blocks of color or images.
Hey Heidi! You are so welcome. I don't see why a graphic would work. It could be a pattern. Ssee the graphic in Buttermilk Clouds. The green stripe is actually a small graphic that is repeated.
Thanks so much Annie, that was so helpful - i just couldn't work out how to do it. You have saved me many ours of messing up my template!
Hi Annie, what part of the variable definition code would you change in order to use a background url instead of a color?
@Miranda, You have me stumped on this one. I know where it should go...in here:
body {
background: url('http://h1.ripway.com/anniebluesky/bd/header_sides.png') top left repeat-x #FFFFFF;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
But, since there already is an image, I don't know how to make two appear. I'm stumped.
Sorry. I will have to put this on my to-do list.
Oh, I thought that's where you would put it for an image background for the whole page. The post on your blog was saying you could create a variable to change just the background of the sidebar to a different color, and you commented to the previous person who asked that you could use an image instead.
No worries, I thought it was an easy code change.
@Miranda, for some reason when I read your comment, I thought you wanted a background image for the whole blog. But you just mean the sidebar...I'm sorry.
Put this code in each sidebar-wrapper that you want the background image:
background-image: url(URL address of your image);
this one seemed to give me the most problems. I keep changing the the font and not the background, i must have something in the wrong spot.
Hi Annie,
I'm not the best with all the techno stuff but going to give it a go at putting graphics in the side bar.
Thanks