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;
}
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;
}
All About Basic 
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
LikeLike
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.
LikeLike
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!
LikeLike
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.
LikeLike
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!
LikeLike
Feel free to knock me if you need any css related help
LikeLike
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!
LikeLike
Try this code to change Post Title of Theme MytyLook which you are using
.posttitle h2 a {
color: red;
}
put this code at the bottom of your style.css and change the color name with color code which you prefer
LikeLike
Totally worked! Thanks so much, that’s gotta be the one combo I didn’t try. 🙂
LikeLike
Great..
LikeLike
Hey I was wondering how do I change the Blog Post Title? Thanks!
LikeLike
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;
}
LikeLike
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?
LikeLike
Hi James…
Would you mind to share your website address?
LikeLike
Hey allaboutbasic,
My website is tpkteam.com, but I’ve actually managed to figure it out!! I inserted “font-weight: normal;” into the #header h1 section of the css. Thanks for this great page and the fast response, everything you’ve put here has been really helpful in customizing my page.
–James
LikeLike
Thanks James….Nice job..
LikeLike
How can I remove the white box under the date on my blog page? website:http://ptbradley.com/?page_id=71
LikeLike
Forgot to check notify me of follow-up comments
LikeLike
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
LikeLike
YES!!! Thank you so much. I’ve been researching your blogs and they are so helpful. I’m going to put a link to them on my website!
LikeLike
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!
LikeLike
Hi Bradley,
Just checked that comments page..
would u mind to tell which white box u r referencing? that straight white line? or the white box behind the gravatar image?
Om
LikeLike
Both, actually. Thank you!
LikeLike
HI Bradley,
would u mind to check the followings..
#container .commentlist li {
background: none repeat scroll 0 0 transparent;
}
#container .commentlist .avatar {
background: none repeat scroll 0 0 transparent;
border: medium none;
float: right;
}
Regards
Om
LikeLike
How can I change the header for individual posts or pages?!
LikeLike
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
LikeLike
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!
LikeLike
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
LikeLike