Home Subscribe to this site with an RSS reader Search this site Contact Likoma Uh, a little help here, please?
Recently

WP-PagesNav

By Bradley Charbonneau | Filed under Plugins, Help, WordPress

Great pages plugin from adsworth.info that helps with page navigation in WordPress. Andreas Viklund is using it in WP Andreas 09 but Litquake wanted the top menu to have different hover over qualities. I knew I could get the "current" state to be a certain class and could easily do it by manually putting in a menu, but then it would lose Andreas's fantastically automated pages and sub-navigation.

After way too long with it, I finally did do the top nav manually but then used the automated page nav below but excluded the root (parent) level of links. I could then give the top level (parents) individual CSS hover classes like so:

PLAIN TEXT
HTML:
  2. <li id="about"> <a xhref="http://www.litquake.org/about/">About</a></li>
  3. <li id="festival"> <a xhref="http://www.litquake.org/the-festival/">The Festival</a></li>
  4. <li id="press"> <a xhref='http://www.litquake.org/press/' title='Press'>Press</a></li>
  5. <li id="participate"> <a xhref='http://www.litquake.org/contact-us/' title='Participate'>Participate</a></li>
  6. <li id="litmix"> <a xhref='http://www.litquake.org/lit-mix/' title='Lit Mix'>Lit Mix</a></li>
  7. <li id="store"> <a xhref='http://www.litquake.org/store/' title='Store'>Store &nbsp;</a></li>
  8. </ul>

Here's the CSS for the buttons:

PLAIN TEXT
CSS:
  1. #about li.about a, #about a:hover {
  2. background-image: url(images/lq-016-about-55x31.gif);
  3. background-repeat: no-repeat;
  4. background-position: center bottom;
  5. }
  6. #festival.currentparent, #festival a:hover {
  7. background-image: url(images/lq-016-festival-96x28.gif);
  8. background-repeat: no-repeat;
  9. background-position: center bottom;
  10. }
  11. #press a:hover {
  12. background-image: url(images/lq-016-press-62x35.gif);
  13. background-repeat: no-repeat;
  14. background-position: center bottom;
  15. }

Then I removed the root level (parent) level of the automated page plugins so it only showed the children (and grand children). I still can't get the class to stick when it's on that page (so the About page has the red question mark when you're on that page, not just hovering over the link). Maybe it's just a CSS issue or maybe it's something to do with something of an automated "current" class code:

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. # a {
  3. color: #CC0000;
  4. background-image: url(http://www.litquake.org/wp-content/themes/wp-andreas09/images/lq-016-20x5.gif);
  5. background-repeat: repeat-x;
  6. background-position: center bottom;
  7. }
  8. </style>

Leave a Comment