blog baby blog

I've had several friends ask how I customized my blog with the new layout. Here are some instructions about what I did although I'll admit I don't know much about HTML code. I know just enough to make myself dangerous, haha. Follow along if you'd like, there are infinite possibilities.

First go to this link http://www.shabbyprincess.com/downloads.asp and download one of these free digital scrapbook kits. I used one of the papers from a kit as my blog background and used the kit's elements to make my header. Save your favorite paper to an online hosting site such as photobucket or flicker. After you have signed into your blog go to the layout tab your blog and choose the menu labeled pick new template and choose the new template called "denim". Save this as your new template. I think it's pretty blah left as is so we'll be sprucing it up to make it our own. To add your favorite background image into the background go to the layout tab, choose the menu labeled edit html and replace this text:

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

with this:

body {
background-image: url(http://i136.photobucket.com/albums/q184/viannqueen/RPENN_expressyourself-bg3.jpg);
background-attachment: fixed;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Then replace the link between the parenthesis with your own link to the background paper or photo of your choice. Now we will be getting rid of the two ugly blue boxes that are on either side of our header. To do this look in the html code until you find this:

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

and replace it with this text:
.
/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
text-align: $startSide;
}


Now you'll need an image for your header. It will work best for this template if it is sized 760 pixels wide by whatever height you would like (ie. on my blog it is 200 pixels high by 760 pixels wide). You can create a header with photoshop using the elements from shabby princess or you can use a photo. Insert the image into your header and select the "instead of title and description" option.

That is pretty much all I did. You can also further customize the colors, borders etc under the fonts and colors menu. I wanted the lines separating my background image from the main area of my blog so in the html code I changed the border width of my header to be 3 instead of 0. You can see where I did this below in the blue text.

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 3px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

and this:

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 3px solid $borderColor;
border-top: 0;


So there you have it. Let me know if any of you have any questions :).