Friday, May 05, 2006

How to change the width of the content and the sidebar

This is a common request of bloggers using some of Blogger standard templates when they see wide spaces on either side of the main and side column, like what you will see in this blog if viewed with a large screen. This is to take into consideration those with small screens. If you want to see how this page will display in a 800x600 resolution, type or copy-paste this into the address bar: javascript:top.resizeTo(800,600). You will see what others with small screen see, and there are will wide spaces. If you change the width of the content column and sidebar, it will look different to those with different screen resolution. It may involve a lot of scrolling to see other parts of your blog, and the less patient ones may pass your blog by. Anyway, if you still want to change the width, the instructions are below:

If you want to change the width of the content and the sidebar, you will have to modify the style sheet. This is based on the Blogger Minima template. Look for the following block of codes:

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}



Note that the sum of the width of the main column (410px) and the sidebar (220px) is less than the total content (660px). You may change the width to whatever you fancy so long as you keep the sum of the width of the sidebar and the main column to be less that the total content. For example, you may change the width of the total content to be 800px, the main column 500px and the sidebar 270px, and your style sheet will become as follows:

/* Content
----------------------------------------------- */
@media all {
#content {
width:800px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:500px;
float:left;
}
#sidebar {
width:270px;
float:right;
}
}



You may also want to change the width of the header as well, as follows:

/* Header
----------------------------------------------- */
@media all {
#header {
width:800px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}



BTW, if you want to see the effect that this change will have on viewers with 800X600 screen resolution, you can type javascript:top.resizeTo(800,600) into the address bar to resize the window to 800x600.

Reminder: Always backup the template before you make any changes to it.

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide (Visual Quickproject Series)

The Weblog Handbook: Practical Advice on Creating and Maintaining Your Blog

The Rational Guide to Google Blogger

NEWER POST    OLDER POST

38 comments:

  1. Thank you so much for this helpful post. I thought I'd ruined my blog completely and was considering trashing it and starting all over. Not only did you help me fix the problem but you did so in a way that I'm sure anyone could understand. Too much technical help is written from the point of view of the expert or even semi knowledgeable but if I with as little as I know could understand it and not only understand it, use it and use it correctly then you've accomplished a rare thing among teachers, you made your lesson EASY to understand. Again, Thank you.

    ReplyDelete
  2. Thank you for your kind words Michael.

    ReplyDelete
  3. hey wow, this is great! i was wondering what my template would look like in a 800x600 screen, thanks a bunch for the javascript thing. i had poured over the html code and figured out for myself by experimenting changing bits of it and checking in the preview.

    cheers again...
    =)

    ReplyDelete
  4. Got to thank Semavi Lady for that javascript tip.

    ReplyDelete
  5. Thanks, just what i needed, so I don't waste any space

    ReplyDelete
  6. Remember that if you want to see the effect of the change on viewers with 800x600 resolution, to type javascript:top.resizeTo(800,600) into the address bar and press the enter key. Also, remember to backup the template before you make any changes to it.

    ReplyDelete
  7. I seem to be having trouble with this since my style sheet is different: I can't find the bit that says "#sidebar, width". I can find the #Content and #main widths, but then it goes to some IE5Hack line like this:

    #sidebar {
    margin-left: 428px;
    border-top: solid 1px #fff;
    padding: 4px 0 0 7px;
    background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-sidebar2.gif) 1px 0 no-repeat;
    }
    Ultimately I'd like to keep the sidebar as it is and widen the body to the left a little bit.
    I am using a modified version of the Snapshot Tequila blog template. you can see my draft here: www.sparkysplace5040.blogspot.com Don't laugh; its a draft and I'm still figuring out what I wanna put on the thing. Thanks!

    ReplyDelete
  8. Peter,
    How do I change the size of a picture to fit into an existing sidebar (ie want to keep the same sidebar size)?

    I copied my profile picture line in my template and replaced it with a new picture URL but the picture is a lot bigger compared to my profile picture. ie it looks out of place.

    ReplyDelete
  9. Can't post HTML tags here. Trying a work around by adding superfluous space after the less than sign and before the greater than character.

    < img src="url" width="" height="" >

    ReplyDelete
  10. Peter
    It works! I fill in some numbers in width="xxx" and height="yyy" by trial and error to find the optimum size. I salute you!

    Love your blog (need more frequent updates though) & the tips you give in Blogger Help forum.

    ReplyDelete
  11. Hi,
    When I post photos, no matter of the resolution I upload them, they never show in the content bar with more than 400 px. Can i make changes to the template to show them with 550 px?
    Thanks.

    ReplyDelete
  12. By the way, i changed the content bar to 660 px.

    ReplyDelete
  13. Hi,

    How do i change the height of the links in my sidebar?
    I have this problem of my profile link in the sidebar being "covered" by my adsense. How to i adjust my profile to be below my profile link??

    I've been trying to do it for a week now with disasterous results.Please help....Thank you in advance.

    Matt

    ReplyDelete
  14. Try posting this problem to Google Blogger Help group.

    ReplyDelete
  15. Hello (again!);
    Could you please tell me how to change the font of the sidebar? I would like it to be a little smaller than my post.
    I would really appreciate help on this.
    Playing around with the html code, I could only shrink the titles of the sidebars, and the code under the blog group help looks nothing like mine:
    * Sidebar Content
    ----------------------------------------------- */
    .sidebar h2 {
    margin: 1.6em 0 .5em;
    padding: 4px 5px;
    background-color: $sidebarTitleBgColor;
    font-size: 100%;
    color: $sidebarTitleTextColor;
    }

    .sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .sidebar li {
    margin: 0;
    padding: 0 0 .5em 15px;
    text-indent: -15px;
    line-height: 1.5em;
    }
    .sidebar {
    color: $textColor;
    line-height:1.3em;
    }
    .sidebar .widget {
    margin-bottom: 1em;
    }

    .sidebar .widget-content {
    margin: 0 5px;
    }

    ReplyDelete
  16. Hi British Gal,

    Take a look at this post: Changing the sidebar font.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  17. thank god for this blog.. I should say that I'm not the most regular blogger..but trying out weird tuff wit my blog kind of helps me make regular posts :D.. nice job

    ReplyDelete
  18. hi peter, thanks a lot for your reply. I am still converting my 2-column blog to 3 column one. Is it possible to have the left and right sidebars to have different widths? please give me the link to the page where you have explained this in your blog. thanks. my blog : www.usmlerockers.blogspot.com

    ReplyDelete
  19. Hi usmlerocker,

    That will depend on the template, whether the width of the 2 template is defined by a single declaration like

    #sidebar-wrapper {
    width: 150px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }

    or if there are 2 definitions like

    #sidebar1

    and

    #sidebar2

    If the first, some extensive editing of the template may need to be done.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  20. thanks a lot chen. rounders 2 doesnt give seperate tags for each sidebars. it gives a single tag only. so i cant have sidebars with different widths in this template. I wanted to have an extra width in my sidebar with ads. anyways, i can manage with rounders2. thanks again.

    ReplyDelete
  21. hi!

    I came across with the sidebar problem..i tried following your direction but to no avail...when using internet explorer everything is fine but in my mac pc the sudebar just fall down below my post..pls help here's my html:




    body {
    background: $bgColor url(http://aycu26.webshots.com/image/14225/2003471537482197604_rs.jpg) top center repeat-y;
    margin: 0;
    padding: 0;
    font: x-small Verdana, Arial;
    text-align: center;
    color: $textColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }
    a:link {
    color: $linkColor;
    }
    a:visited {
    color: $linkColor;
    }
    a img {
    border-width: 0;
    }

    #outer-wrapper {
    font: $bodyFont;
    }

    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    margin: 0;
    padding: 0;
    text-align: left;
    }

    #header {
    width: 862px;
    margin: 0 auto;
    color: $headerTextColor;
    padding: 100px 0 0;
    font: $headerFont;
    }

    h1.title {
    padding: 0;
    margin: 0 0 20px;
    font-weight: lighter;
    font-size: 90%;
    }

    h1.title a {
    color: $headerTextColor;
    text-decoration: none;
    }

    #header .description {
    display: block;
    margin: 70px 0 0;
    padding: 0;
    font-size: 40%;
    color: #946338;
    }

    /* Content
    ----------------------------------------------- */

    .clear {
    clear: both;
    }

    #outer-wrapper {
    background:url(http://img250.imageshack.us/img250/6899/2005273491206916169rscotp6.jpg) top center no-repeat;
    }

    #content-wrapper
    {
    border-top: 0;
    margin: 20px auto 0 auto;
    padding: 0;
    text-align: left;
    width: 880px;


    }


    #main-wrapper
    {
    float: left;
    margin-left: 4px;
    overflow: hidden;
    width: 540px;
    word-wrap: break-word;

    }


    #sidebar-wrapper
    {
    float: right;
    margin-right: 4px;
    overflow: hidden;
    width: 300px;
    word-wrap: break-word;

    ReplyDelete
  22. Hi B B Anne,

    I am very sorry I have delete your comment because it contains a long unbroken line which can cause problems.

    Regarding your problem, please refer to Troubleshooting sidebar at bottom of page tips and solving sidebar at bottom of page problems.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  23. What is Total Content? What is the use for? Any effect if we do wrongly or more than the Total Content?

    ReplyDelete
  24. Hi Mr. Law,

    I am afraid I cannot understand what you mean by Total Content. Could you by chance be referring to the total width of the sidebar or sidebars plus main column (which contains the posts and comments)? Or could you be referring to the width of the main column (containing the posts)?

    Peter Blog*Star
    Good Music and Movies

    ReplyDelete
  25. "For example, you may change the width of the total content to be 800px, the main column 500px and the sidebar 270px,"

    I'm talking about the width of total content as above... Question as last comment...

    ReplyDelete
  26. Hi Mr. Law,

    Hope you don't mind me addressing you as such as I like to short names. Regarding TOTAL CONTENT, sorry, this is an old post. I have lots of posts and I cannot remember all I have put into the posts. I would assume total content width refers to adding up the widths of the main column (posts and comments), sidebar or sidebars plus any margins or paddings. All these must add up to the width of the TOTAL CONTENT which if I remember correctly, usually is referred to as the total wrapper or something. Sorry I am no template expert and you will have to check your template to make sure of all the terminologies, but will appreciate your feedback on whatever you may have found, as we all learn from each other. I would like to be reminded of things I might have forgotten.

    Regarding changing of width and content, perhaps I should edit this post and tell readers why I would be very hesitant to change the width of the TOTAL CONTENT of the template of this blog and all my major blogs. You probably are using a large screen. Try typing or copy-pasting
    javascript:top.resizeTo(800,600)
    into the address bar and press the ENTER key and see what happens.

    You may also be interested to have a look at very reputable websites run by professional webmasters like BBC News and your very own country's "newpaper" (online version)
    theStar.com.my
    (don't want to provide active link) have the same narrow format to accommodate those poor fellows with small screen.

    Perhaps these post will provide some clues as to why I would be hesitant to change TOTAL WIDTH. Adjust widths of main column, sidebar/s such that TOTAL WIDTH remains the same perhaps, but not change TOTAL WIDTH.

    What is (my opinion) the best template for a blog

    Why I use this narrow plain template

    But of course those are own personal opinions, but based of visitors statistics.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  27. Thanks again for your speedy reply and also thanks for those very detail explanation.

    It's enough for now and it would help me to start the journey to explore more about the blogger. Thanks for all the help you have offer me.

    Do visit my blog if you're free(I know you're busy and work till 1am!)

    See you soon and have a nice day!

    ReplyDelete
  28. I am frustrated by this. Isn't there a way to make width variable so that my content fills the screen no matter what size it is?

    ReplyDelete
  29. Hi Gia,

    For what you want you will have to get a fluid width template. However you must remember that considerate webmaster will make sure that the thing they put in their fluid template website will be just nice for visitors with small screen (if not small screen visitor will see something horibaly wrong as things will look squeezed in and some thing might be too wide etc.

    Peter Chen Blog*Star
    Dream Driven Life(TM)

    ReplyDelete
  30. Thank you so much Peter, I made the total width 900, main 450 and sidebar 350 which gave me space between the two....you are great!!!

    ReplyDelete
  31. Peter - Where do i make the changes to make my posting wider? I am not a programmer therefore I am not familiar with languages. Do I go under posting and edit post and go to the tab, edit post? Please help.
    thank you.

    ReplyDelete
  32. You will have to edit the template as explained in this post.

    ReplyDelete
  33. HI!

    I'm having a problem resizing the body of my blog to fit 2 pictures side-by-side. Here is what my html template looks like:

    body {
    margin:0px;
    padding:0px;
    background:$bgcolor;
    color:$textcolor;
    font-size: small;
    }

    #outer-wrapper {
    font:$bodyfont;
    }

    a {
    color:$linkcolor;
    }

    a:hover {
    color:$titlecolor;
    }

    a img {
    border-width: 0;
    }

    #content-wrapper {
    padding-top: 0;
    padding-$endSide: 1em;
    padding-bottom: 0;
    padding-$startSide: 1em;
    }

    @media all {
    div#main {
    float:$endSide;
    width:68%;
    padding-top:30px;
    padding-$endSide:0;
    padding-bottom:10px;
    padding-$startSide:1em;
    border-$startSide:dotted 1px $bordercolor;
    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 */
    }
    div#sidebar {
    margin-top:20px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0;
    padding:0px;
    text-align:$startSide;
    float: $startSide;
    width: 30%;
    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 */
    }
    }

    @media handheld {
    div#main {
    float:none;
    width:90%;
    }

    div#sidebar {
    padding-top:30px;
    padding-$endSide:5%;
    padding-bottom:10px;
    padding-$startSide:5%;
    }
    }

    #header {
    padding-top:0px;
    padding-$endSide:0px;
    padding-bottom:0px;
    padding-$startSide:0px;
    margin-top:0px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0px;
    border-bottom:dotted 1px $bordercolor;
    background:$descbgcolor;

    I've moved it around in the past, but am having trouble now. Can you offer any suggestions?

    Thanks a bunch!

    ReplyDelete
  34. Looks like you are using the fluid width Sand Dollar template. I don't like fluid width templates, have not used it much and thus do not have the experience to help you.

    ReplyDelete
  35. thank u! I have a lot of issues with computers, but ur post was so simple! thanks again :)

    ReplyDelete
  36. Dear Peter,

    Firstly, I want to thank you for all of your work on this blog. It has been the voice of sanity for me since I started blogging this past January!

    I started a new blog, a few days ago. I wanted it to be EXTREMELY simple. I thought, "no problem! I'll just use minima and stretch out the content." Weep! I can no longer use it. I've got "Ethereal", now, and have figured out how to remove the background but can't seem to figure out how to get rid of the little blue bit at the top and how to do, basically, what you show how to do in this post. The HTML is different for this template. Any luck of a fresh tutorial for the new templates???

    Anyway, the blog that I'm talking about is

    http://katysphotojournal.blogspot.com

    and, my other blog is

    http://www.inthesunnyspot.net

    Thanks so much - if you can or you can't. Your blog has been so much help already.....

    Sincerely, Katy Noelle

    ReplyDelete
  37. Oh, dear! I'm so silly! At least, it only took me under 5 minutes to figure out that I could do it in the new template designer. DUH! Now, if I could just get rid of that blue at the top.....

    ReplyDelete
  38. Hi Kathy,

    I guess the templates you used is from the Blogger new DESIGN series Blogger has made a few drastic changes from old classic template to the new xml LAYOUT template to the current new TEMPLATE DESIGNER template which they say is not supported Internet Explorer 6 which is the reason I have not started using them so may not be able to help you much except perhaps latter when I have more experience with them.

    If you want to continue using the previous Minima template or especially if you want my modified Minima template, you can get it from me (contact form or at 4 column blog

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics