Theme: MistyLook by Sadish CSS Style Sheet Edit and Upgrade.How to Change,Modify and Hide Site Title,Search Bar,Pink Feeds,Header Image Width and height,Site Description,Navigation Menus,Post Title,Blog Post Content,Leave a Reply,Comments,Right/Left Sidebar,Footer Section with Tags, White/Blank space,Blog Post Contents width and more.Learn how to change Font,Font type, color and Text Alignment easily.

Theme mistylook
  
 

In my Last post I have tried to show you how to modify the CSS of Theme Neutra and Theme Beach. Today I am sharing you about the CSS style sheet Modification of  theme MistyLook by Sadish.
Here  I have tried to show you about the very basic and important CSS Modification of the Blog Post Content, Site Title,Site Description’s Font type,font color and size. Also, I have included how to hide or remove Navigation menus,Leave a reply,Comments,Right SideBar, Footer Tag,Search Bar etc. You will also learn about how to increase the Blog Post Content width by using CSS.
 
 
Need Help on CSs ? Put your question with your website name in the comment box below.
 
You may also like to check the followings
 

1. WordPress.com Visitor Tracking :Know who is visiting your site

2. WordPress.com Flick Flash Gallery: Show your flickr photos to your readers

3. WordPress.com animated Photo gallery : Show your images stored in WordPress with WordPress animated photo gallery

4.WordPress.com Visitors Flag : Where from your users visiting you.

5.WordPress Free Blog Favicon Icon : Show Your Favorite images on the addressbar.

6.WordPress Unicode Font Support: Learn How to Write and Use Unicode Font in WordPress.com free blog.

 
 

1) If you want to remove the top Navigation bar (Both Home,AboutMe  +  Search Bar)
 
#navigation {
    display: none;
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,Serif;
    letter-spacing: 1px;
    margin: 20px auto 0;
    position: relative;
    text-align: left;
    width: 760px;
    z-index: 1000;
}
 
 

Theme Misty Look
 
 

2)If you want to remove the Search Bar from the Top
 

#navigation ul li.search {
    display: none;
    font-size: 0.9em;
    position: absolute;
    right: 0;
    top: 0;
}
 
 


 
 

3) If you want to remove Only “Home”,”About Me”  from the top
 
Note: To remove Navigation menus may need some other CSS related change,for example:search bar may be displaced due to this change. So,check that changes you need is covered in this CSS modification tutorial
or let me know about your problem.
 

#navigation ul li a, #navigation li.current_page_item ul a {
    background: none repeat scroll 0 0 #EDEDED;
    border-color: #DEDEDE #DEDEDE -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: #666666;
    display: none;
    font-weight: bold;
    padding: 2px 10px;
    text-decoration: none;
}
 
 

4) If you want to Remove Pink colored Feeds: Posts and Comments
 

#feedarea {
    display: none;
    float: right;
    padding: 10px 10px 0 0;
    text-align: right;
}
 
 

5) If you want to modify the width and height of Header Image
 

#headerimage {
    background: url(“http://s0.wp.com/wp-content/themes/pub/mistylook/img/misty.jpg?m=1244997298g“) no-repeat scroll 0 0 transparent;
    height: 150px;
    width: 752px;
}
 
 

6) If you want to change  Text Widget Background Color
 

li.sidebox {
    background: url(“http://s0.wp.com/wp-content/themes/pub/mistylook/img/sideheadtop.gif“) no-repeat scroll left top gold;
    margin-bottom: 10px;
    padding: 10px;
}
 
 


 
 

7) If you want to change Right SideBar’s Header Font,color and size
 

li.sidebox h2 {
    color: black;
    font-family: times New Roman;
    font-size: 1.6em;
    font-variant: small-caps;
    font-weight: normal;
    text-align: left;
}
 
 

8. )If you want to change Right SideBar Widgets Font,color and size
 
.textwidget {
    color: black;
    font-family: times New Roman;
    font-size: 1.5em;
}
 
 

9) If you want to remove Header Image by using CSS
 

#headerimage {
    background: url(“http://s0.wp.com/wp-content/themes/pub/mistylook/img/misty.jpg?m=1216490232g“) no-repeat scroll 0 0 transparent;
    height: 0;
}
 
 


 
 

10)If you don’t want to show header site Title by using CSs  
 

#header h1 a {
    border: medium none;
    display: none;
    text-decoration: none;
}
 

11)If you want to Modify or change Header Site Title’s Font,color and size
 

#header h1 a {
    border: medium none;
    color: red;
    font-family: times New Roman;
    font-size: 1.5em;
    text-decoration: none;
}
 

12)If you want to change the background of Header Site Title
 

#header h1 a {
    background-color: blue;
    border: medium none;
    color: red;
    font-family: times New Roman;
    font-size: 1em;
    text-decoration: none;
}
 
 

13) If you want to change the Site Description’s font,color and font size
 

#header h2 {
    color: black;
    font-family: cursive;
    font-size: 1em;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 5px 0 0 10px;
}
 
 

14) If you want to change the Background Color of  Site Description
 

#header h2 {
    background-color: yellow;
    color: black;
    font-family: cursive;
    font-size: 1em;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 5px 0 0 10px;
}
 
 

15)If you want to change Blog Post Content’s Font type, font size and text alignment
 

#content .entry {
    font-family: times New Roman;
    font-size: 1em;
    margin: 1em 0;
    padding-right: 1em;
    text-align: justify;
}
 
 

16) If You want to remove the Right SideBar
 

#sidebar {
    display: none;
    float: left;
    font-size: 0.9em;
    overflow: hidden;
    width: 200px;
}
 
 


 
 

17)If you want to change Blog Post Content’s Width by removing or hiding Right sidebar
 

#content-main {
    float: left;
    margin-right: 20px;
    overflow: hidden;
    width: 731px;
}
 
 

18)If you don’t want to show or hide Footer Tags
 

#content .post-info {
    background: url(“http://s0.wp.com/wp-content/themes/pub/mistylook/img/underline1.jpg“) no-repeat scroll left bottom transparent;
    display: none;
    padding-bottom: 12px;
}
 
 

19) If you don’t want to show “Leave A Reply”
 

#respond {
    display: none;
    margin: 2em 0 10px 5px;
}
 
 

20) If you want to change the Comments font type,font color and font size
 

.commentlist p {
    color: black;
    font-family: times New Roman;
    font-size: 1.2em;
}
 
 


 
 

21)If you want to change Navigation Menus (Home,About Me) font type,font color,font size, Menu Background Color
 

#navigation ul li a, #navigation li.current_page_item ul a {
    background: none repeat scroll 0 0 greenYellow;
    border-color: gold;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: red;
    display: block;
    font-family: times New Roman;
    font-size: 1em;
    font-weight: bold;
    padding: 2px 10px;
    text-decoration: none;
}
 
 

22) If you don’t want to show comments by using comments
 

#container .commentlist {
    border-top: 1px solid #DDDDDD;
    display: none;
    margin: 0;
    padding: 0;
}
 

#comments{
    display: none;
  
}

28 Responses to Theme: MistyLook by Sadish CSS Style Sheet Edit and Upgrade.How to Change,Modify and Hide Site Title,Search Bar,Pink Feeds,Header Image Width and height,Site Description,Navigation Menus,Post Title,Blog Post Content,Leave a Reply,Comments,Right/Left Sidebar,Footer Section with Tags, White/Blank space,Blog Post Contents width and more.Learn how to change Font,Font type, color and Text Alignment easily.

  1. I’d like to widen the container for where the post text and sidebars reside. Could you help me with that? I understand that I would also have to widen the header.

    theliberryan.wordpress.com

    Like

    • Hi Amanda…
      Yes You have to change the width of your header image to cope with the change of Container width

      Please try this … It will Widen your Misty look theme’s Container + your Content Area

      #container {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 1px solid #CCCCCC;
      margin: 0 auto;
      position: relative;
      text-align: left;
      width: 851px;
      }

      #content-main {
      float: left;
      margin-right: 20px;
      overflow: hidden;
      width: 581px;
      }

      Please let me know it works for you or no.

      Like

      • thank you! It ended up making the post text too wide, and pushing the sidebar down, but I adjusted it like this and it looks good on my end now.

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

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

        Any tips on getting the navigation bar to go over to the left since I enlarged the container?
        theliberryan.wordpress.com

        thanks!

        Like

      • Hi Amanda

        Would you mind to try with the following code to make your Navigation Bar Aligned

        #navigation {
        display: block;
        font-family: Trebuchet MS,Tahoma,Verdana,Arial,Serif;
        letter-spacing: 1px;
        margin: 20px auto 0;
        position: relative;
        text-align: left;
        width: 951px;
        z-index: 1000;
        }

        Let me know it works for you or no.

        Like

  2. YES! That moved the tabs over. I reduced the width to 921px, 951px made it flush with the container, 921 indents it a bit.

    thank you for your help!

    Like

  3. angiesbrecht says:

    Hey, wondering if you could give me a hand– I just want to change the colour of my post titles and I’m having a hard time; for one thing, I can’t seem to find the (#content .post h2 a) section, which apparently is what I’m supposed to change– I’m wondering if, because I specified the link styles right away in the first a: link etc. section, I’m not able to override them when it comes to the post titles? My site’s at printandculture.wordpress.com; thanks for your help, and I’m sure the solution is super obvious, but I just cannot figure it out!

    Like

  4. Hey I was wondering how do I change the Blog Post Title? Thanks!

    Like

    • Hi
      Sorry for the late in reply as i was not available for 2 days…..

      So, to change the blog post title of mistylook theme try this…

      #content h2 a:link, #content h2 a:visited {
      color: red;
      font-family: cursive;
      font-size: 20px;
      }

      Like

  5. jqmarks says:

    Hi, I’ve been able to change the font color and size of the site title, but i’m struggling with the font itself. I’m trying to make it Helvetica Neue Light, but it seems to insist on remaining bold (or at least normal). Do you have any suggestions?

    Like

  6. How can I remove the white box under the date on my blog page? website:http://ptbradley.com/?page_id=71

    Like

  7. Forgot to check notify me of follow-up comments

    Like

    • Hi Bradley,
      I think u r searching for the following code

      #content .post-info, #content h2.pagetitle {
      background: none repeat scroll 0 0 transparent;
      padding-bottom: 15px;
      }

      🙂

      paste the following code at the bottom of ur style.css and let me know it is ok or not

      Good night for now

      Om

      Like

  8. I’m baaaccck. I can’t get rid of the white boxes on my comments page. http://ptbradley.com/?p=152#comments Could you help me, please. Thank you!

    Like

  9. xoxbekxox says:

    How can I change the header for individual posts or pages?!

    Like

    • Hi Bek
      if you are using wordpress.com then check Featured image of individual post is showing in the header or not

      otherwise u have use specific css for each post to show different header….

      Regards
      Om

      Like

  10. May I go a step further on this old post and ask another question?

    Using Misty Look as well, I widened the page margins an realigned the navigation tabs at the top form the info provided above. I have not yet paid for the upgrade, so all the CSS entry only shows in preview mode. I am wondering how to:
    1) move the search bar at the top to align with the right side.
    2) move the widgets all the way to the newly expanded right hand side
    3) widen the actual written posts to fill all this new space
    4) (if it looks cool) have the widgets floating on the right so there is an exposed bar between them and the main content where viewers can see the background image
    5) maybe expand the twitter widget so it’s not so smooshed
    6) I think I can figure out expanding the header at the top

    I am at http://brianfgermain.wordpress.com/

    Thank you!

    Like

    • Hi Brian
      i was checking ur issue.. i found u as per issue 1…the search bar is already at the right side and aligned?

      and.. as per issue 2… have u already increased the right sidebar?

      and.. can u share me screenshot image about the issue u mentioned pls?

      Om

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: