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:

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):

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

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)

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

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:

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):

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

9 thoughts on “How to style Misty Look

  1. Image Captions Comment:

    Thank you for the tips. I had to modify the instructions for Image Captions as the directions were not clear to me. You mention the 2nd line in the targeted code which reads:

    <p class="<?php echo $classname; ?>"><?php echo $attachment_link; ?><?php echo basename($post->guid); ?>

    If I comment the entire line , then no image as well as no filename. I had to comment only the 3rd segment of this line so the image will display but the file name does not:

    <p class="<?php echo $classname; ?>"><?php echo $attachment_link; ?> <!– <?php echo basename($post->guid); ?> –>

    I put "the caption" in the description field so I do not need to add the 2nd snippet of code. I do not want to see the Caption under all the pix anyway. I actually like the way Misty Look formats the picture (smaller) vs, Twenty-Ten so I had to take the above approach to get the picture to display.

  2. How can I disable the ‘Tags’ and ‘Catagories’ sections in the sidebar please?

    Also, how can I disable the ‘Leave a comment’ text (I have already disabled discussions) ?

  3. I have a friend who likes the theme and I am trying to help her, but every download of the theme only has a sample page. Is there a full theme download anywhere?

  4. Very strange. Various sites show a home page and contact page in preview, but no download anywhere has these pages. She likes the theme but doesn’t have the skills to create pages from a simple sample page. Hopefully I will hear back from the author.

  5. I am very new to WP. I am using the Misty look and I’m hoping to have a one column blog. After I removed the sidebar, I’m trying to enlarge the photo and text to the full width of the blog and eliminating the outer border. I could use your expertise.

Add your voice!