How to style Misty Look

The other day Richard moved his blog from WordPress.com over to The Guru Network – welcome Richard 😉

He was using Sadish Bala’s beautiful Misty Look Theme and wanted to stick with it. However, the self-hosted version doesn’t quite look like what he had on WordPress.com, so here are some code tweaks to adjust it.

Please note that at the time of writing, the latest Misty Look version is 3.8RC – there may be a newer version with different code available. Keep that in mind when you’re trying to apply these tweaks 😉

Site Width

One of the main differences between the WP.com and the self-hosted version is the container width. That’s easily adjustable in style.css though. We need to tweak several values here, and depending on how wide you’d like your site to be, you need to tweak others.

For this example, I’ll make the entire site 100 pixels slimmer. First let’s slim down the entire container – have a look at the width parameter, I’m making mine 880 instead of 980:

#container {
 border: #d6cdbe 1px solid;
 background: #fff;
 margin: 0 auto;
 width: 880px;
 position: relative;
 text-align: left;
 clear:both;
}

If you’ll refresh your page now, you’ll see that the nav menu, header and sidebar are screwed up. Let’s fix them in that order.

Nav Menu (again 880 instead of 980):

#access {
 background: #000;
 margin: 0 auto;
 width: 880px;
 display:block;
}

The Header Image needs to be 20 pixels less than the width of your container (in our example, that’s 860 instead of 960):

#headerimage {
 clear: both;
 background: #fff url(img/misty.jpg) no-repeat 0 0 center;
 margin: 10px;
 color: #fff;
 height: 200px;
 width:860px;
}

Let’s fix the Sidebar:

Since we’ve stolen 100 pixels in our example, we need to take those away from somewhere. It’s up to you if you want to steal those from the content column, the sidebar or a mix of both. Taking it off the content column while leaving the sidebar width looks quite nice, but for the sake of this demonstration I’ll opt for a 50/50 split. Play around and see what works best for you.

Here’s the content column fix (set width to 590 instead of 640)

#content-main
{
 display:inline;
 float: left;
 width: 590px;
 padding:0 15px;
}

… and the sidebar fix (set width to 230 instead of 280):

#sidebar {
 float: right;
 width: 230px;
 margin:0 15px;
 font-size:0.9em;
}

Make your Title and Nav Manu stand out

I find that the Website Title could do with a BOLD font to make it stand out a bit. While we’re fiddling with the style.css file, let’s look at this bit of code here:

#header h1
{
 font-size:1.8em;
 margin:10px 0 0 10px;
 font-variant:small-caps;
 font-weight:bold;
}

Change the last line to “font-weight:bold;” instead of “font-weight:normal;”. We’ll do the same for the Nav Menu (you have to add the last line):

#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 12px;
 font-weight: bold;
}

Share this:

• Twitter
• Facebook
• LinkedIn
• Pinterest

Related

Pages: 1 2