I don't know if any of you really care to know this stuff or not, but I post it anyway. I have been fooling around with my own html codes to get the blog look that I want, and am constantly searching for tutorials on how to do things. Some stuff is easy to find, and some is not. And some, is non existent. So when I figure something out, I like to share it in case anyone is in the same boat I am. I recently helped a fellow blogger (Debbie) with her blog. She wanted the extra large pictures that blogger now offers, and a two column blog. But, she still wanted to be able to have a pretty background. This is fairly simple to do, so I thought I'd copy and paste the instructions that I gave her and post them here. She claims to not know much about computers and what not, and she said that my instructions were very easy to follow. So here they are. These codes are for if you'd like a two column blog that is big enough to show the extra large pictures, and will still allow you to still use a pretty background. If you change to this look, you can only use the 3 column backgrounds that all of these wonderful sites offer, like the cutest blog, etc. If you'd like to take a look at Debbie's blog, click here. This is what your blog would look like if you change a few things. Only follow these instructions if you have the standard blogger template. Two column, minima template. I'd recommend saving a copy of your html code in case you don't like the new look. It also might help to print this out and look at it while you are changing your html code. That way you don't go back and forth between screens.
How to get to your html code: Go to Customize or your Dashboard. Click Layout, and Edit Html.
Find this in your html code:
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 660px;
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: 200px;
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 */
}
Just change the numbers in orange. Your html will have different numbers, your numbers look like this:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
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 */
}
Change the numbers in red to the numbers in orange. Change your outer wrapper number from 660px to 880px, and change your main wrapper from 410px to 660px. Also change your sidebar wrapper from 220px to 200px.
After you make these small changes, you will probably want to change your header wrapper and possibly your footer-wrapper to a similar size as your outer wrapper. You can play with this number to get exactly the look that you want.
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
Adjust your header wrapper to the 860px. Now, you have the option to include the border around your header or not. If you don't want a header border, all you do is change the border in two places from 1px to 0px. If you don't like it, change it back. Or make it thicker by going with 2px or 4px. I have mine changed so that the inner line is smaller than the outer. Play with it to get what you like.
That is it. Also, I made your main wrapper big enough to fit the extra large pictures. I tried this out on my test blog so I know it works.
Oh yeah, and you can do any 3 column background with this layout. The 2 column backgrounds will be too small. Hope this helps!!..
Now check out my post that is more fun under this one.
