MangoOrange™

As you can see, I love the WordPress theme, iTheme designed by N.Design Studio. However, it just disturbed me to see the black font appearing when the page is selected and I personally felt it should be white instead.

Before and after:

Hence, I decided to take a look at the CSS and make the changes. To my surprise, it is the author’s original intention to have the font white, but it is just not appearing the way it should be. The author probably used IE while designing the theme, as it only works in IE and not Firefox.

So, I decided to write a quick tutorial to fix it because it’s a very simple fix and it’s too troublesome to download and upload again. Hence, here’s the tweak for the Firefox users…

1. Login into the WordPress dashboard and click on the Presentation tab.
   
2. Click on the Theme Editor tab under the Presentation tab.
   
3. On the right hand side of the CSS textbox, there is a list of filenames under the title ‘iTheme’ theme files. Click on the Stylesheet link.
   
4. In the CSS textbox, scroll down and look for the code below or click Find and type in keyword “#nav li a:hover”.
   

   #nav li a:hover, #nav .current_page_item a{
   text-decoration: none;
   background: #2e91c6 url(images/nav-item-hover.gif) repeat-x;
   color: #ffffff;
   }

5. Insert in “#nav .current_page_item a:visited” with a comma before the curly bracket, {. Please note that the bold is meant to guide you visually on where to make the changes and note intended to be on the original code.
   

   #nav li a:hover, #nav .current_page_item a, #nav .current_page_item a:visited{
   text-decoration: none;
   background: #2e91c6 url(images/nav-item-hover.gif) repeat-x;
   color: #ffffff;
   }

6. Finally, your code should appear like below if you have done it correctly.
   (Click for a larger picture)

Hope you find the tutorial easy to follow. Do feedback to me at the comment section if you have any problem.

written by mickeyckm