Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

Changing Page Width

To change the width or areas of your page go to Edit Html in your layouts. Click Ctrl+F and type in #header {

Now below that you will see the width in the coding. It should be on the new line or so. Change it to the number you want. Keep in mind no one like a site that they have to side scroll on so try to keep it under 1000px.

Now find #content-wrapper { or #outer-wrapper { (depending on template) in the edit html

make the width the same as the header

Now find #main-wrapper { in the edit html

this should be around 500px-600px give or take

Now Find #sidebar-wrapper { in edit html

The Sidebar('s) plus Main should not exceed the Content or outer-wrapper. Keep in mind that with padding and margin added on it may take up more room then the size you set for them.

Next find #footer { in the edit html

This sometimes does not have a size modifier under it so you can add one by adding this code under the #footer {

Example:

#footer {
width:900px;
Your footer should be the same size as the Header and content-wrappers (Normally)

Check and see if everything look good before you save. If the sidebars have been pushed out of place try editing the sidebar to a larger number and or the main to a lower number.

4 comments:

  1. Thanks a lot for your help. It's everything just fine, now. Just great :)

    Paulo Martins

    ReplyDelete
  2. Any ideas on making a stretchy post width?

    ReplyDelete
  3. What do you mean by stretchy?

    ReplyDelete
  4. I have been using your site for a couple weeks now. My first blog at blogger. Your site has helped me a lot. Every time I come back I find something helpful. I learned how to stretch the header image so it will be compatible in all browsers in the CSS editor earlier tonight with your code. Keep on Keepin on Brother.

    ReplyDelete

Web Design Blogs PageRank