Support » Themes and Templates » current_page_item works but not on home page.

  • Resolved jalacom

    (@jalacom)


    Hi,
    I’m in the process of building a template and using some css tabs for my site navigation. I’m trying to get my homepage to use the .current_page_item class so it appears that the “home” nav tab is on top as the selected tab(of course). It works fine when you click a navigation link and go to that page (even on the homepage). However when i first load the main index page it does not.

    This is the site address(where it doesn’t work):
    http://givethemsomethingbetter.com/gtsb/

    When you click on “home” it goes to this address (where .current_page_item class works correctly):
    http://givethemsomethingbetter.com/gtsb/?page_id=2

    I’m lost trying to figure out how to get it to work.
    This is how I’ve got my code set up so far:

    The HTML and PHP include:

    <ul id="nav">
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul>

    The CSS (would also like to know if I can make it function without having to use the !important declaration):

    ul#nav li.current_page_item a {
    
            background-color: #fff !important;
    	color: #CA3A44 !important;
    	border-bottom: solid 2px #fff !important;
    }

    Let me know if I’ve left out any pertinent information. Thanks so much in advance for the time and help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Well no replies so far. I just went in and added this to my css:

    ul#nav li.current_page_parent a {
    	background: white !important;
    	color: #CA3A44 !important;;
    	border-bottom: solid 2px #fff !important;;
    }

    using .current_page_parent seemed to work. I would still like to know if there’s a way to do this without using important!

    esmi

    (@esmi)

    Forum Moderator

    ul#nav li.current_page_item a {
        background-color: #fff;
        border-bottom: 2px solid #fff;
        color: #CA3A44;
    }

    works just fine for me using Firebug.

    Good point, thanks. I had a friend helping me out, we started with the !important tag. Apparently I thought i had tried it without them. But i’ve removed them and they work fine.

    esmi

    (@esmi)

    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work. It makes it so much easier to troubleshoot problems.
    http://getfirebug.com/

    I have Firebug installed, I guess I just didn’t know how to alter the css with it.
    I’ve been using the developer toolbar in firefox as well along with developer tools in Safari and Chrome.

    esmi

    (@esmi)

    Forum Moderator

    You don’t use Firebug to change your CSS. You use it to identify the CSS you need to change and play with a few (temporary) CSS changes. Then, you edit the stylesheet manually. It’s by far the best dev tool out there for this kind of work. I use the web dev toolbar too but not for this kind of “pinpoint the CSS changes” work. That’s always done with Firebug & I reckon it’s cut my development time down by 50% at least. It really is well worth getting used to it.

    Esmi,
    I realize you don’t make permanent changes to your CSS file using Firebug. I was saying I did not know how to use the feature to “play” with the CSS. (granted I do now)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘current_page_item works but not on home page.’ is closed to new replies.