Cecille's Creativity

Before making changes in your blog make sure that you copy and save the HTML in a notepad or anywhere else. Just in case you don’t like the result of what you are doing. You can copy and paste it back.

1. You need to have a blogger account. If you don’t then sign up at blogger.com

2. You need to look for any background that you want for your blog. I used the “Art Explosion Scrapbook Factory (Version 4.0)” CD and they have variety of beautiful layout and you can actually make your own style layout too.

Remember: You can’t use a dark background if you are using dark color text on your blog.

Let’s Start….

Sign in at blogger.com

Then, go to LAYOUT, choose PICK NEW TEMPLATE then click MINIMA then SAVE TEMPLATE. Then go to EDIT HTML then scroll down and look for /* Header

Once there, change the text that is in red color

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

------------------------------------------------------------------------------------------------
At the bottom of the same Header section look for: #header .description {

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px; --->>>change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

-----------------------------------------------------------------------------------------------
#outer-wrapper {
width: 660px; ---->>>change to 940
margin:0 auto; padding:10px;
text-align:$startSide;
font: $bodyfont;
}

-----------------------------------------------------------------------------------------------

#main-wrapper {
width: 410px; ---->>>change to 500
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 */
}

Add this between the “width and the float”
margin-right: 15px;
margin-left: 15px;

----------------------------------------------------------------------------------------------

Now, copy this code and paste it in between the "outer-wrapper" code and "main-wrapper" code.

#left-sidebar-wrapper {
width: 185px;
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 */
}

Add this in between the “width and float”
margin-right: 10px;
margin-left: 5px;

----------------------------------------------------------------------------------------------
#sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 5px;
margin-left: 10px;
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 */
}

Add this in between the “width and the float”
margin-right: 5px;
margin-left: 10px;

Then locate this too. It’s just a few lines below

Now, type this above the “main wrapper”

Then click save template

Now, if you try to click VIEW BLOG you will now see the three column Minima Style.

To be continued....