How To Adjust Margins And Widen Page Width

When using a three column template you might be frustrated because either you can't fit everything you want to, or there's so much wasted white space. With the designer template there are options to adjust how wide each column goes, but sometimes it's just not far enough! I'm going to divide this into two parts: making your page wider, and adjusting your margins.

Making Your Page Wider

1. Under the "Design" tab go to "Edit HTML".

2. Somewhere in that hairy scary HTML is a code that looks similar to this,
#Header1 {width:1000px;margin:0 auto}]]>

The easiest way to find it is do a page text search (Edit-Find or on a Mac you can hit Command-F). Your HTML code will be a little different so do not search for the entire code, but just part of it: #Header1

3. Once you find the code you will need to change the number in red:

#Header1 {width:1000px;margin:0 auto}]]>

The larger the number, the wider your blog will be.



Adjusting Your Margins

1. Under the "Design" tab, open "Template Designer".

2. Go to "Advance".

3. In the second to left column scroll to the bottom to "Add CSS".

4. Add the following code just as it is here:

.column-left-outer .column-left-inner{

padding: 0;

}

#sidebar-left-1{

margin: 0;

}

.column-left-outer .column-left-inner {

margin-left: -60px;

}

.column-right-outer .column-right-inner{

padding-left: 30px;

}

#sidebar-right-1{

margin-left: 35px;

}

5. This is the trial and error part (like always). Play around with the different numbers. As you change them, you can see in the bottom half of the screen what the changes look like. Once you find the look you want, hit save.