Tuesday, May 8, 2007

Blogger 101: Widening Margins to Fit Your Photo

I used the Son of Moto template for this one (in order to work through Kristen's example). It should work in a similar fashion with other templates, though in some you have to change the width in several places. Some templates are very difficult to change the width on because they have image files that provide shading or borders. You might want to eliminate these files first, if you can. By the way, in Son of Moto, widening the borders automatically gets rid of some shading on the edges.

First find this segment in your coding:


#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}
The "width:692px;" line indicates the width of your header and post/sidebar sections together. You can change 692 to 800 (to fit Kristen's example) or desired width. I've managed with a 900 width, but that might be pushing it.

Now find this segment in the coding:


#main {
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 */
}

The "width: 400px;" indicates the width of the blog post area (not including sidebar). You'll want to widen this too, or you'll have a big wide area in the middle of your blog. I would suggest a width of 528 in Kristen's example, but you can play with different numbers to see what works.
Hope this all makes sense. It's a little challenging to try to explain. :)

10 comments:

Christine said...

Alicia, We were doing the same thing. I put Kristen's header on my test blog this morning, altering it in the same way that you altered it. The shading on the Son of Moto template is a picture. Thus, you can save it as a picture, widen it, save it on a website and then insert the url of the picture location (substitute the url that ends with outerwrap.gif) and voila your shading will be back. I am leaving the sample on my test blog, until Kristen sees it.

Kristen Laurence said...

I don't mean to repeat myself ad infinitum, but thank you! You have both been so helpful.

sugimoto said...

thanks so much. it worked and i managed to widen my blog space and keep the sidebar, too, BUT i now have these rounded corners left where the margins used to be set. Does anyone know how to also move the corners, too, along with the margins themselves?
thanks,
Mike

tata said...

Thanks so much for this! I have been trying to widen the margins of my blog forever! This trick was quite painless and super-quick!

Maegan said...

Thanks for the step by step! Also, Christine's comment above was extremely helpful. I wanted to keep my shadowing. :)

bnilesh said...

Thanks for this post. It was simple & really helpful for a novice HTML editor like me.

JOCOeveryman said...

THANK YOU! I've been trying to do this to my little old blog for months. Now if I can just figure out how to customize the background I'll be in heaven. Work in progress.

Shirley said...

Thanks a million!! Now my pictures aren't cut off.

Cityzen Green said...

This works for photo posting... thank you! I am now having a challenge with the writing underneath the photo because the margins for this did not change. Can you help? Thanks.

Julie Pishny said...

Thank you so much, I was stuck and your blog helped me fix my problem and I so appreciate it!!