Followers
Wednesday, January 24, 2007
Recently I've seen quite a few people asking to change the size of their post column or sidebar to utilize the empty space on either side of the written areas. that is most certainly possible, but you must first realize that it may wind up being a detriment to your blog readers.
Standard blog pages are designed to be viewed comfortably on an 800x600 computer screen. I see you laughing...Irregardless of how long ago you junked your 800x600, there is still a whole world of people out there using them.
When you make your blog wider, you force them to scroll side to side to see all of your content. That sometimes deters people from coming to your blog. When the blogging experience gets to be troublesome, people sometimes quit!
But I haven't deterred you, and you still want to do it...Okay! Here we go!
Before you run hog-wild at being an amateur programmer, TAKE NOTE:
ALWAYS KEEP A COPY OF YOUR PRESENT TEMPLATE IN A NOTEPAD FILE...ON YOUR OWN COMPUTER!
This way if you get into trouble, you can always get out of it.
As you play with the following numbers in your template...change a number, then hit preview to see what it looks like. If you do not like the look or you can't remember what all you changed, hit Clear edits. That will put you back where you started from
DO NOT SAVE CHANGES UNTIL THEY ARE ALL CORRECT!
I am using the page source from this blog as an example. The label name of your parts may be slightly different depending on who wrote the HTML.
Changing the size is rather easy to accomplish. The only rule to remember is that the sum of the parts must remain smaller than the whole! LOL...in plain English, the sum of the width of the main-wrapper (post area) and the sidebar-wrapper (sidebar) must be smaller that the size of the outer-wrapper (page).
The numbers I am talking about are highlighted below.
#header-wrapper {
width:890px;
margin:0 auto 10px;
border:1px solid #cccccc;
}
#outer-wrapper {
width: 890px;
margin:0 auto;
#main-wrapper {
width: 410px;
float: left;
margin:0px 10px 0px 0px;
.sidebar-wrapper {
width: 210px;
float: left;
margin:0px 10px 0px 0px;
#footer {
width:890px;
clear:both;
margin:0 auto 10px;
I included the header-wrapper and the footer because these sizes should also be consistent with your changes to the outer-wrapper...or whatever your template calls the page area.
I have included a link to AnyBrowser. It is an awesome tool to see what your changed screen looks like on any size browser.
I have tried using your instructions, however i dont see the same thing as you have mentioned , i am using a blogger template, just have a look , i dont see some of the fields. or it looks like there is a address for that template from where it takes the default settings, could u please help me , have a look at the blog and suggest me at your best ,
www.world-culture.blogspot.com
Thank You
Thanks,
Jane
http://www.janehuntart.blogspot.com
Thanks!
It helped me a lot :)
Manish
#header-wrapper {
width:890px;
margin:0 auto 10px;
border:1px solid #cccccc;
}
part mine looks like this:
#header-wrapper {
margin: 0px;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
There's no width with the px thing. Can someone help me? Thank you so much!! :)
Thanks! :)
Scroll down in the code. On most blogs it is called something line "main" and it will probably have a width of something like 420px.
Now when you change that number, use the Preview button on the code box to see if that's the change you want to make. If it is not the right one, click the Discard Edit button, and the number will go back to what it was before you changed it. (that way you don't have to guess at what you changed)
When you get it the way you want it, only then hit the SAVE button!