Word Pressspecific styles for navigation

WordPress does now output several predefined CSS styles. There is a template tag that not only outputs the page links wrapped in an <li> tag, but adds the class attribute page_item to it along with several other class styles and possibilities depending on the state of the link within WordPress. For example, if the selected page link also happens to be the current page displayed, then an additional class called current_page_item is additionally applied.

If your WordPress theme was to take advantage of creating a robust menu for the page links, you could write individual styles for page_item and current_page_ item in order to have complete control over your page links menu. This would also ensure that your menu displays whichever page is currently active.

Multiple class styles assigned to the same XHTML object tag?

As you can see in the DOM Source of Selection graphic, you can have as many classes as you want assigned to an XHTML object tag. Simply separate the class names with a blank space and they'll affect your XHTML object in the order that you assign them. Keep in mind that the rules of cascading apply, so if your second CSS rule has properties in it that match the first, the first rule properties will be overwritten by the second. There are more suggestions for this trick in Chapter 9.

This means we simply change our Listamatic CSS from an id (#current) within an a:href item, to a class within our li item (current_page_item) as follows:

#navlist li.current_page_item a{ background: white; border-bottom: 1px solid white;

We now have a page layout that looks like the following:

We now have a page layout that looks like the following:

Insiders Guide To Outsourcing Your Backlink Building

Insiders Guide To Outsourcing Your Backlink Building

This report will be a little different, because it's hard to recommend specific providers. No, I'm not hiding any of my top secret, ninja, stealth backlink providers, it's just that things change all the time.

Get My Free Ebook


Post a comment