JPEG Banner for Minima Black

Here's how I replaced the standard banner on the Minima Black template with my own graphic. The whole page header is wrapped in a div element with ID #header-wrapper. The strategy is to use the JPEG as a background for the page header wrapper. I have done this by adding the background-image property with the URL of my banner image and setting the width and height properties to match the dimensions of my banner:

#header-wrapper {
width:750px;
height:150px;
margin:0 auto 10px;
/* border:1px solid $bordercolor; */
background-image: url(http://www.thornton-oetzel.com/ken/liquidair/assets/images/LA_Banner.jpg);
}

I also commented out the border property. This puts the banner image behind the original banner text. The next step is to turn off the banner text because my banner is self contained. That is simply achieved by adding a display:none property to the header:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
display: none;
}

That's all there is to it.

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.