Changing your own blog layout

I have had several people interested in learning how to changed their blog layouts. I haven't seen a lot of you for a while, so this is my way of teaching those interested in doing it themselves. If you would rather that I do it for you, I am happy to, just let me know.

Step One: Picking your backgrounds
Before we actually start editing the layout, we need to pick what background we would like. I'm a fan of scrapbook pages, but you can use whatever you want. Here are some places to find scrapbook papers.

www.shabbyprincess.com
www.designerdigitals.com
www.digitaldesignessentials.com
www.digitalscrapbookplace.com
www.scrapgirls.com
www.scrapbookflair.com
www.sweetshoppedesigns.com
www.twopeasinabucket.com
www.littledreamerdesigns.com

Pick two pages you think go well together. One for the main background, and one for the background behind your text and download them to your computer. I recommend picking a very plain background for your text. If you don't want to use a second paper for behind your text, feel free to pick a color. You'd need to figure out what hexadecimal number corresponds with the color you want. (If that doesn't make sense, it's ok. Just know that you need a 6-digit number for your color to show).

I like to use http://colorschemedesigner.com to figure out the number. Simply pick the color that you want from the color wheel, then click on the "Scheme Info" tab near the bottom. It will show you the number next to a picture of the color. You just need the number. I should look something like this #04334F.

Note: if you would like you could just use colors instead of images on your site. If you choose to do that just skips step two.

Step Two: Upload your images to the internet
Now that you have you pictures to use for your layout, we need to upload them to a server so that other people can see them as well. The easiest way to do this is to create an account at photobucket.com and upload your images.

Later you will need the URL (or web address) to your picture. This is really easy to find on photobucket. Simply click on the picture that you want and copy the information that is under "direct link" on the right hand side of the page.

Step Three: Changing the Background of your blog
You are now ready to start changing the layout of your blog. It easiest to start with a clean blog layout, but you don't want to do this step feel free to skip it, just know that the code on your blog may look different. Log into blogger, click on "layout," then click on "Pick New Template." Select the "minima" template and then "Save Template".

Now that you have a blank layout, it's time to start making it look cool. Click on "Edit HTML" in the "Layout" tab and scroll down until you see this code.

/* Use this with templates/template-twocol.html */

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

*If you would like to change the main background to an image:
you will want to paste this code between the "body{" and the "background:$bgcolor;"

background-image:url();

You will then need to paste the "direct link" information you got from photobucket between the parentheses, and deleate "background:$bgcolor;" so it looks like this (but with your own information).

/* Use this with templates/template-twocol.html */

body {
background-image:url(http://i725.photobucket.com/albums/ww258/stephanieoram/SP_HarvestSpice_Paper_GreenDiamonds.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

*If you would like to change the main background to a color:
you will need to erase the "$bgcolor" that follow "background:" but you'll need to leave the ";" It should look like this:

background: ;

You'll just put the information for the color that you want between the semi-colon and the colon so your ending code will look something like this (but with your own color information):

/* Use this with templates/template-twocol.html */

body {
background:#04334F;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

*Everyone:
click on the "Save Template" button and preview your blog to make sure you like it.

Step four: Changing the background behind your text
In the "Edit HTML" section of your "Layout" tab, scroll down until you see this code:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

*If you want an the background behind your text to be an image:
copy and paste this code on a new line between "#outer-wrapper{" and "width: 660px;"

background-image:url();

Next, you will then need to paste the "direct link" information you got from photobucket between the parentheses so it looks like this (but with your own information).

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background-image:url(http://i725.photobucket.com/albums/ww258/stephanieoram/SP_HappyGoLucky_Paper_Brown.jpg);
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

*If you want the background behind your text to be a color:
copy and paste this code on a new line between "#outer-wrapper{" and "width: 660px;"

background: ;

Then you'll just put the information for the color that you want between the semi-colon and the colon so your ending code will look something like this (but with your own color information):

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background: #0F8920;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

*Everyone:
click on the "Save Template" button and preview your blog to make sure you like it.

Step five: Changing your Blog header
If you have an image that you would like to use for the header (or title section) of your blog go to this section of your code:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

You'll want to paste this code between the line that says "#header-inner{" and "background-position:center;"

background-image:url();

You'll then want to put the direct link to your image between the paretheses. It should look something like this (but with your own image information)

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-image:url(http://i725.photobucket.com/albums/ww258/stephanieoram/BlogHeadder-2.jpg);
background-position: center;
margin-left: auto;
margin-right: auto;
}

Once you get your picture to show, you'll probably need to change the width and height of your header so that you can see the picture the way that you want. Below "#header-wrapper{" there should be a "width:660px;" Feel free to change the number in there to change the horizontal width of your header. (measured in Pixels) You'll also want add between "#header-inner{" and "background-image:url();" the following code:

width:650px;
height:300px;

It's kind of hard to get the borders to show right, so I normally just delete the line of code that says "border:1px solid $bordercolor;" So your ending code should look something like this.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:810px;
margin:0 auto 10px;
}

#header-inner {
background-image:url(http://i725.photobucket.com/albums/ww258/stephanieoram/BlogHeadder-2.jpg);
width:800px;
height:300px;
background-position: center;
margin-left: auto;
margin-right: auto;
}

Play with the "width" and "height" values until it shows all of your picture when you view your blog by clicking the "Preview" button.

Step six: Change the width of your text background and text
Now that the header of your blog shows, we know how wide to make the background behind the text. Go to this section of your code:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background-image:url(http://i725.photobucket.com/albums/ww258/stephanieoram/YellowPaper2-1.png);
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 {
width: 220px;
float: $endSide;
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 */
}

Play with the width in all three of these areas until you like the look with your header. The "outer-wrapper" section is the background behind your text. The "main-wrapper" section is the width of the actual text in your blog posts. And the "sidebar-wrapper" is the width of the side bar.

Save your changes and view your blog.

I hope that this was helpful and fun to learn. There will be hopefully more posts to come to help you learn to do other things to your blog. If you have any questions about anything covered in this post just leave me a comment and I'll try and answer your question quickly.

Enjoy :D