5.20.2008

Blog Decorating

One of the funnest things about having a blog has been learning how to decorate it. It was overwhelming for me at first (most everything is), but I created a different blog just to practice on so I didn't hurt my real one - I figured that out AFTER I lost ALL of my widgets (the slide show and other stuff on the side bar). Its possible that I may have used one of Mike's driving words when that happened.... Anyhow, here's the scoop, if you're interested:

Create a "tinker" blog so you don't goof up your real one.

Find a background on the internet, or at a scrapbooking store (relax, no actual scrapbooking will take place here). If the background is on the internet, save it to your computer. If from the store, scan it and save onto your computer as a jpg file.

Upload the file to Flickr, click on "all sizes", and gather the URL code. It will look like this: (http://farm3.static.flickr.com/2392/2432096117_1e54369880_b.jpg)

Go into Layout on your pretend blog, then Edit HTML. Scroll down just a little bit and you'll see this:

body {

background:$bgcolor;

margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

To change the background of your blog you need to change one thing. Instead of:
background:$bgcolor;

You want it to say:
background-image: url(http://farm3.static.flickr.com/2392/2432096117_1e54369880_b.jpg);

To change the color of the header, columns, and side bar to match your background, look for this:
#header-wrapper {
background:$bgcolor;

Instead of:
background:$bgcolor;

You want it to say:
background-color: #color code;

(using a color code from this chart) (the color code will be 6 digits (numbers and/or letters)

Do the same for the main column and side bar:
#main-wrapper {
background-color:#color code;

#sidebar-wrapper {
background-color:#color code;

OR if you want a picture on your header instead of just a color, you would replace this:
#header-wrapper {
background-color: #color code;

with:
#header-wrapper {
background-image: url(http://farm3.static.flickr.com/2392/2432096117_1e54369880_b.jpg);
width:930px;

See where it says width:930px? That is where you can change the width of your header. You can look for the same things under:

#outer-wrapper {
width: 930px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
background:$bgcolor;
width: 650px;
float: $startSide;
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 */
}

#sidebar-wrapper {
background:$bgcolor;
width: 250px;

Just remember that main wrapper, sidebar wrapper and the space in between will equal the px of the outer wrapper. I have 650 + 250 = 900 px. and then my outer wrapper is 930, which means I have a nice space of 30px between my main column and the sidebar. I also made the header 930px so it would be equal to the total width of the column, space, and sidebar.
Hit preview to see if your blog is the way you want it. If not, just keep tinkering. Make sure you save the template when you are done!

Isn't this fun? Please feel free to email me with any questions. If you change your blog - please let me know - I want to see it! And thank-you to Cocoa for getting me started.

3 comments:

elmer said...

you are SOOOOOOOOOOOOOO helpful!

Mindi said...

you know that i never change jack shiz because i am scared to death of screwing it all up. i am a big chicken.
i wish you were here to do it for me like nick burns.

Stephanie M said...

This post was a total Nick Burns moment! Sometimes I have them!