Friday, February 9, 2007

Changing the width of Minima Black

Minima Black is one of the basic Blogspot templates. Its default width is 660 pixels. Personally I wanted to change the width to 750 pixels but using this process you can make it anything you want.

First, go to the "Template" section and click on "Edit HTML". Edit HTML is a bit of a misnomer here, what we are going to be editing is CSS. You don't need to expand the widgets for this so make your life simpler and leave that unchecked. Personally I use select all (control-A on a PC) to select the entire text box into a text editor. And perform my edits there.

The base width appears in three places in the template. I am only showing the essential elements here, these lines are actually scattered in the source so find them using the search in your editor.

#header-wrapper {
width:660px;
}
#outer-wrapper {
width: 660px;
}
#footer {
width:660px;
}

I edited each of these to 750px:

#header-wrapper {
width:750px;
}
#outer-wrapper {
width: 750px;
}
#footer {
width:750px;
}

This leaves a big hole between the two columns of the page. To fill that gap I increased the width of the posts. The two column widths are specified like so:

#main-wrapper {
width: 410px;
}
#sidebar-wrapper {
width: 220px;
}

410 + 220 = 630 which leaves 30 pixels for the gutter between the columns. Going from 660px to 750px, I am increasing the with by 90px so I add that to the main wrapper to bump the post width to 500px and keep the gutter the same width:

#main-wrapper {
width: 500px;
}
#sidebar-wrapper {
width: 220px;
}

That's all there is to it. You can adjust these numbers at will as long as your two columns together are no wider than your page.

6 comments:

Tobias Davis said...

Thanks for that, I found your page using a search and this tip fixed it immediately. I like the 750px width, the original is just a little too skinny.

Heather Myers said...

I too found you via Google and thank you for the quick and easy replace targets! The width was bugging me and I'm too tired to actually wade through the CSS tonight.

Stephen Ocean said...

Tips worked perfectly, Thanks! If anyone looks at the analytics for their site they will see that almost everyone is at 1024 and above. In fact, more than 60% are using 1200 and above. No sense wasting all that real estate just so a few curmudgeons can squeeze another few years our of their TRS80s.

Em said...

Thank you so much for this. Very easy to follow and works perfectly.

now my blog is alot better.

please check out
http://sweetdropsofhoney.blogspot.com/

Arun Kumar said...

Thank you so much man !! easy to use tip.

Eric Allen Marshall said...

Great tutorial. Thanks a bunch.