Misty Look CSS edits: column width and widget headers

  • Author
  • #492473


    After trying out Tarski and Titan I think I am set on the Misty Look theme. I’ve managed to make a number of CSS changes — as a total newbie — that I am happy with thanks to all the wonderful support here.

    I do wish I could alter a few more things in the code and I am wondering if you all can give me some clue as to how much of a pain in the neck these changes might be. First, I would really love to have the post/text area slightly wider (like I was able to do somewhat easily with other themes). This area is currently defined by a box, so I suspect I would have to go in and alter the box dimensions, and sidebar dimensions among other things. Do you think this is something a newbie could accomplish without making too much of a mess of the theme, or adding too many gray hairs? If it isn’t I’ll just let it go and deal with the narrow columns.

    And secondly, for the life of me I can’t get the sidebar heading fonts to change color or font family no matter how hard I try. I found what I thought was the code for these headings, I can’t get them to budge. Any thoughts on that would be much appreciated too!

    Thank you!

    The blog I need help with is erinmidwife.com.


    I wish I had the answers for ya—CSS, Typekit, etc.—I don’t understand any of it…I would love to make changes to my misty themed blog though…I’d love a wider sidebar—or even a 2nd side bar =) Also, I wish the shaded box surrounding a widget was a slightly darker as well…The font used for ‘pages’ at the top of theme isn’t dark enough either—actually I wish all of the text was a smidge darker…

    …somebody help us?




    Erin, have you tried using Firebug for Firefox? It’s an extension that makes editing .css files pretty simple and fast. You still have to copy the changes manually into your style.css file, but it helps tons.



    Here’s some code for you to try out. It should work assuming you want the post width extended so your whole theme is wider rather than increasing the post width and decreasing the sidebar width proportionately. You would need to change your header image to fit the new size. In the example below it gives you an extra 70 pixels. You’ll need to add or subtract the same amount to each width declaration if you want to modify this yourself. I’ve also included the bit to restyle your widget titles.

    div#container {width:950px;}
    div#headerimage {width:930px; background:#fff url("URL") no-repeat scroll 0 0;
    div#content-main {width:670px;}
    #sidebar li.sidebox h2 {font-family:Georgia,Verdana,Arial,Serif; color:#333;}

The topic ‘Misty Look CSS edits: column width and widget headers’ is closed to new replies.