how to change the width of your blog

Note: I did this using the Minima '06 template. 

Grace asked for this tutorial, but I thought I'd post it on here so others can see it too. *winks*

Good things about having a wider blog:

• It looks cleaner. [At least I think so!]
• You can add bigger pictures, for photographers this is great! Besides, who wants little bitty photos?! 

Here's the tutorial! 

1. Log on to your blogspot dashboard and click on "design". [*cough* Of course!]

2. Now click on "Edit HTML" 

3. [ALWAYS back up your template. You don't want to make a mistake and loose your blog! I usually highlight the entire code, copy it, and save it in a document.] Click on "ctrl" + "F" at the same time and hold them down. This should bring up a little search box in the right-hand corner. Copy this code into that box:

#header-wrapper {

And press "Enter".  That should bring you to the Header Wrapper part, under the Header section. It should look something like this"

4. See this code under the "#header-wrapper{"? 

 width:660px;

  margin:0 auto 10px;

  border:0px solid $bordercolor;

  }

I highlighted in blue the part you need to change. Your code should look something like this. Anyways, change the "660" to whatever you want your blog width to be . . . I usually go with 960 or 950 pixels. Note: Don't make it too high! Your sidebar will go disappear to the bottom of your blog.

5. Now that you've changed the header width, type copy this code into the search box:

#outer-wrapper {

Under it you should see something like this: 

#outer-wrapper {

  width: 660px;

  margin:0 auto;

  padding:10px;

  text-align:$startSide;

  font: $bodyfont;

  }

Do the same thing you did in step #4. 

6. Right under the "#outer-wrapper {" part, you should see a code like this:

#main-wrapper {

  width: 400px;

  float: left;

  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 */

  }

I have mine set to 700 pixels, play around with it! I'd do about 260 more pixels though.

7. Now copy this code into the search box: 

/* Footer

Under that, you should see something like this:

#footer {

  width:700px;

  clear:both;

  margin:0 auto;

  padding-top:15px;

  line-height: 1.6em;

  text-transform:uppercase;

  letter-spacing:.1em;

  text-align: center;

}

I'm not sure what most people's blog footer width is, but I have mine at 1000 pixels. 

8. Preview your changes. If you like them, save it! If something is wrong, leave me a comment or check out the questions at the bottom of this post.

Troubleshooting: 


1) My sidebar went to the bottom of my blog! What do I need to do? 


If this happens to me, I usually make the Main Wrapper, Footer, and Outer Wrapper smaller. [change the pixel width to "940" instead of "960" or something. Play around with it and keep previewing. This has happened to me once or twice only, so if anybody else knows a better solution drop me a comment!

2) My background doesn't fit, what happened?


What you need to do is get a 3 column blog background, or make your own here. The white part on the background is probably 660 px, so you need more space.
****
I haven't had any other problems, but if any of you all do please tell me! Also, now that you have a "bigger" blog, you can add bigger photos! You'll need to have the new version of blogger, I think, and you click on the picture after you've uploaded it to your post. A little bitty window thing should come up, and when it does click on "Extra large".

I hope this tutorial was helpful, I tried to make it very clear. Also, no copying this tutorial. You may think I'm trying to act like Olivia from Robin Blogs, but no, I hate when people copy other's work. I spent a good amount of time, and no stealing it to claim as your work!

Good luck designing and let me know if you have any trouble!