May 01

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:

iTheme Navbar CSS bug iTheme Navbar CSS bug (Fixed)

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.
    iTheme Navbar CSS Bug Fix Step 1
  2. Click on the Theme Editor tab under the Presentation tab.
    iTheme Navbar CSS Bug Fix Step 2
  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.
    iTheme Navbar CSS Bug Fix Step 3
  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)iTheme Navbar CSS Bug Fix Done

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

written by mangoorange


Best Wordpress Hosting Providers - 2014

All three hosts offer FREE 1-click Wordpress installs making them the best Wordpress hosting providers. For more web hosting reviews be sure to check out AlreadyHosting.com.

 #1
#2 
 #3
#1 - Bluehost 
Bluehost Review
#2 - iPage 
iPage Review
#3 - HostMetro 
HostMetro Review


8 Responses to “iTheme Navbar CSS bug”

  1. 1. Andre Path Says:

    Hi, your blog is awesome, and i need some help:

    How can i fix the iTheme theme TO SHOW 3 COLUMNS? like sidebar-content-sidebar.

    i`ve tried loads of times to change the code, (php ad style sheets) and nothing happened… ( just error codes )

    i liked iTheme is a great theme u know, can you help me sir?

    Thank u

  2. 2. mickeyckm Says:

    stevenlichen: It seems like you have it all figure out. Sorry for the late reply.

    Andre: I haven’t personally tried it yet, but I can give it a try and I will share with you once I have some results.

  3. 3. mickeyckm Says:

    You are most welcome 🙂

  4. 4. Andre Path Says:

    Really? Oh, thank u so much sir, thank u for reading this and i`ll be waiting news from u.

    Good Night, (around 3.00 am here) and see u soon

    Andre

  5. 5. mickeyckm Says:

    Andre: I have created the i3Theme just for you. Hope you like it. You can view the post here.

  6. 6. Andre Path Says:

    thank u so much, mangoorange!! thank u so much, i will post

  7. 7. Bernard Says:

    Hey MO,
    Your tutorial on fixing the CSS bug ( page lettering white in firefox ) was very easy to follow…except my version of wordpress doesn’t allow you to make/save any changes to the code in this area? I will try and find the actual file with my ftp client but are you using the most recent version of WP?

    LMK,
    Bernard

  8. 8. mickeyckm Says:

    Bernard: That’s because your file is not made writetable. Try to use your FTP client to make your folder CHMOD 666 or 755 on the theme file. Then you should be able to edit your theme files through the WordPress interface.

Leave a Reply

You must be logged in to post a comment.