How To: Make Your Blog Wider

This is a really simple fix for your blog, if you feel, like I have been, that your minima template is just too darn narrow.  Of course you can use these tricks on other blog layouts, but you'll want to make sure you make yourself familiar with what your HTML code is saying to you.

You don't really need to know all the mumbo jumbo in your code, but you do need to know what a few things are, and they're labeled pretty clearly, so it makes it easier.

*Note: before editing your HTML, there's a spot at the top where you can back up your entire template.  DO THIS!  That way, in case you mess up, you don't lose any other edits you've done previously.*

First step:
Let's start with widening your header.  First thing you do is go to your Layout Tab, then at the top, there will be a button that says "edit HTML".  Click there and it will go to your HTML codes.  Backup you HTML Code.

Next, scroll down in your code and find a section that looks like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Change the numbers I've highlighted in red to be 900 and 0 respectively.  Preview your blog in between each edit, and you'll see what each section does and where it is, and you'll become more familiar with your HTML code and it's functions. 

Then scroll down and find this code, which should be two sections down from the one you just edited:


#header {

margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


Change that 1 to be a 0 also.
 
Okay got the header worked out.  Now we need to work on the body of the blog.  Find this section in your HTML code:
 
#outer-wrapper {

width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change the red number to be 900.  Then scroll down until you get to this section:
 
#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 */
}

Change the red numbers to be 615.  Then go to this section, which is directly below the previous one:
 
#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 */
}

Now change this number to be 260.
 
You're done changing your blog width.  Now preview to make sure everything looks the way you want it to.  If it doesn't adjust the numbers so they fit your needs.  Remember, as long as you've backed up your template, if you screw it all up, you have a restore point to go back to, so play with it and make it fit you, then when you've got it the way you want it, go ahead and save your template.
 
I wanted to add one little extra edit that you may or may not want, but I'll add it here, just in case you do.  You know those little borders around your photos in your posts?  They drive me crazy and I don't like them on my blog.  All you have to do to remove them, if you don't want them, is to find this section in your HTML code:
 
.post img, table.tr-caption-container {

padding:4px;
border:1px solid $bordercolor;
}

Change that number to be 0 and those borders will disappear.  By familiarizing yourself with your HTML code, you can find all sorts of things to customize, and then, you're free to be as unique as you are.
 
If you want to see a finished blog before you start editing, please visit kristinslearningmoments.blogspot.com.
 
Happy Editing!