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;
}
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.
Excellent – thank you for sharing your findings 😉
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) ?
Hi David,
those are default widgets – they should disappear as soon as you put your own widgets into the sidebar (under Appearance – Widgets)
Greatings,
Es de clase!
Nicolas