blog customization

I'm no pro at web coding, but customizing your blog can be super easy (and fun) once you know what you're doing. A lot of people want to know how to do basic stuff like changing the background, etc. There is blogger help for this, but I thought I'd write my own too since a lot of friends have asked. So here we go!

The first thing I want you to do is bookmark the following link:
http://lesliefranke.com/files/reference/csscheatsheet.html

I love this cheat sheet because it defines the different CSS commands. You also will want an image hosting website. I use photobucket, but anything else works too.

Ok, let's get started... first you need one of blogger's basic templates. We're going to use the tic tac template. It's fairly easy to change and gives you a good amount of code to manipulate. We are going to change only a few things:

1. The background
2. The main area color
3. The sidebar color
   
4. The header
   

Once you have saved that as your template, choose the "edit html" link in the navigation bar under the layout tab.

Scroll down through the code until you come to /* ---( page defaults )--- */

Underneath all of this is where you will want to do your editing, starting with the "body" code, which looks like this:

body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #e0e0e0;
}

That number is the current background color, so let's change that first. You can enter a new hex number (6 digits or letters).

background: #ECBA4B;

Now the background is orange! But those grey parts don't look so hot anymore. don't worry. We'll get rid of them in a minute or 3.

If you want to add a repeating background images, you would just change it to this (using your own hosted image for the background:

background: url(http://location of your image) repeat;

Tada! If you want to use an image and stick it in one spot on the page, you would want to add

position:relative; top:100px; left:100px; no-repeat;

....instead of "repeat" after the url.

Now we're going to strip those grey parts out of the code completely. If you want to experiment with putting other images in there, you can, but for our purposes, we want something cleaner.

Everything for these is listed under the /* ---( layout structure )---*/ section. Delete everything in red. NOTE: It's VERY important that you don't delete your end semi-colons. They must exist for your code to work correctly!

#outer-wrapper {
width: 847px;
margin: 0px auto 0;
text-align: $startSide;
font: $bodyfont; background: url(http://www.blogblog.com/tictac/tile_$startSide.gif) repeat-y;
}

#content-wrapper {
margin-$startSide: 42px; /* to avoid the border image */
width: 763px;
}
#main {
float: $startSide;
width: 460px;
margin-top: 20px; margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0; padding-$startSide: 1em;
line-height: 1.5em;
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 {
float: $endSide;
width: 259px;
padding-top: 20px;
padding-$endSide: 0px; padding-bottom: 0;
padding-$startSide: 0; font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor; background: url(http://www.blogblog.com/tictac/sidebar_bg.gif) no-repeat $startSide top;
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 */
}

/* ---( header and site name )--- */

#header-wrapper { margin: 0;
padding: 0;
font: $pagetitlefont; background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div_$startSide.gif) no-repeat $startSide top;
}

#header {
margin: 0;
padding-top: 25px;
padding-$endSide:
60px;
padding-bottom: 35px;
padding-$startSide: 160px;
color: $pagetitlecolor;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom $startSide;
}

Scary! Your blog now looks so naked! But don't worry! It won't stay that way for long. Now we're going to start adding things back in. You can use a background, but I wouldn't recommend it. So we'll stick to colors. I've made some other changes as well, so I'll highlight them.

#outer-wrapper {
width: 800px;
margin: 0px auto 0;
text-align: $startSide;
font: $bodyfont; background: #00A4B1;
background: #FFFFFF;
}
#content-wrapper {
width: 800px;
}

#main {
float: left;
width: 450px;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: 0;
padding: 30px 30px 30px 30px;
line-height: 1.5em;
background: #F7D981;
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 {
float: $endSide;
width: 260px;
padding-top: 20px;
padding-left: 20px;
padding-right: 10px;
font-size: 85%;
line-height: 1.4em;
color: $sidebartextcolor; background: #B2CE40;
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 */
}

/* ---( header and site name )--- */

#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background:#00A4B1;
border-bottom: 6px solid #FFFFFF;
}

#header {
margin: 0;
padding: 30px 30px 30px 30px;
color: $pagetitlecolor;
}

There! That helps QUITE a bit. Sometimes you have to fudge things when it comes to widths so that the sidebar doesn't end up smashed below the main part. You can also add borders to any part that you want. Just follow the example in the header-wrapper list. And refer to the cheat sheet for ideas on options. Don't forget though that borders will mess with your widths, so use the "Preview" Button a LOT so you know what adjustments you need to make.

Now, there's still a grey footer at the bottom that we missed, so let's fix that now. Delete all the red parts..

/* ---( footer )--- */

.clear { /* to fix IE6 padding-top issue */
clear: both;
}

#footer-wrapper {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 9px;
padding-$startSide: 0;
font-size: 85%;
color: #ddd;
background: url(http://www.blogblog.com/tictac/bottom_sill.gif) no-repeat bottom $startSide;
}

#footer {
margin: 0;
padding-top: 20px;
padding-$endSide: 320px;
padding-bottom: 20px;
padding-$startSide: 95px;
background: url(http://www.blogblog.com/tictac/bottom_sash_$startSide.gif) no-repeat top $startSide;
}

Yep, The entire footer. You can just put in an image if you want something different. Otherwise you don't really need it.

Additionally, if you want to delete or change the little grey icons or the arrow next to the date, you can do so they are under:

h2.date-header { and .sidebar h2 {

I also didn't change anything in the comments area... but you can experiment and see what works for you! You can also change how some of the text looks.

After you've made all your changes, save the template. Then click the Fonts and Colors link to change those.

If you want to add a custom header instead of the text and description, you can do so in the "Page Elements" section.

I hope that helps!

If you would like to see the template all put together, interactive style, it'll be up for a while at: http://ccstestblog.blogspot.com/