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;
}
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?
I’m not sure, I don’t think there is. You’ll have to create sample pages and posts manually and populate them with Lorem Ipsum text I guess.
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.
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.