Why nobody i ever considering browsing the Codex? 🙂
Dynamic_Menu_Highlighting
That does not help. I don’t know what the pages will be, so a conditional statement like that will not work without knowing the pages names.
It is also possible to use the built-in feature of WP: when listing the Pages when you are on a certain Page it adds an additional class to the current Page item. You just have to add that class to your stylesheet.
That won’t work right for me. I need the additional class on the anchor not the list item. :$
You are full of great ideas, but none of them solve my current issue. lol… Any more?
I know I did it for a client.
From the Codex: All list items (<li>) generated by this tag will be given the CSS class “page_item”. When wp_list_pages is called while displaying a Page, the list item for that Page will be given the additional CSS class “current_page_item”.
Defining the different style for the current_page_item in the stylesheet will result in having that Page name visually different in the menu/pagelist… whatever.
Isn’t it what you want?
Yes, but I need it to be on the anchor (a href) instead of the list item (li) for it to override the styling on the normal anchor for that link.
#menu a
{display:block; width:202px; padding:5px 18px 5px 0; color:#606060; background: url(img/sidebarbg.gif) top right repeat-y; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}
#menu a:hover
{color:#303030; background:#f0f0f0 url(img/sidebarbg.gif) top right repeat-y;}
#menu ul li.current_page_item:hover
{color:#505050; background:#fafafa;}
#menu ul li.current_page_item
{padding:5px 18px 5px 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}
This is what I have currently, and as well as it works, it does not solve my last problem. A current page item should not have the image in the background while the rest of the links should.
I would change them all to ul li instead of a, but in IE and some other browsers you can’t have anything else have a hover effect other than normal links (a href). So my li hover won’t work on such browsers.
Great! Please post what you did so the next poor soul with the same problem can find it….
I changed everything to use the li rather than the a href.
#menu a
{display:block; width:202px; padding:5px 18px 5px 0; color:#606060; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}
#menu a:hover
{color:#303030; background:#f0f0f0}
#menu ul li.current_page_item:hover
{margin: 0; color:#505050; background:#fafafa;}
#menu ul li.current_page_item
{margin: 0; background:#fafafa; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
margin: 0;
padding: 0;
list-style: none;
background: url(img/sidebarbg.gif) top right repeat-y;
}
Here is the code for my menu, and you will see it a lot more when I release the theme with it. 🙂 Thanks moshu for the help.
Thanks much. It’s always helpful to have the solution to the original problem….
