Support » Themes and Templates » CSS Sprites on Current Page

  • Hi,

    I want to make a menu using CSS Sprites, however, can’t seem to find information about how to make the current state happen. I have found information on making Sprites work great with WordPress and it’s true, but there is no information as to how to make this happen.

    Any geniuses that can help me out?


Viewing 4 replies - 1 through 4 (of 4 total)
  • I would like to know how to do this as well. Can’t seem to find a good explanation of how to target the current page/state. Would be great if someone has a good article/tutorial.



    Forum Moderator

    first question – what menu?

    page menu for instance has the class ‘current_page_item’ on the link to the current page, which you can use to style the link in the style.css. others are similar, check the codex for the corresponding links 😉



    Its odd that there are 100 css sprite examples with not a single one showing how to make a menu item stay ‘current’ in WP.

    I am sure my way is wrong in many ways, but it works for me!
    1. Make your menu here: (its great)
    2. Place the css in your stylesheet, and the html where you want.
    3. Read this, esp. about php:
    4. From matt’s css, carefully take out all styling for .current. eg:

    ul#navigation li#navigation-1 a.current {
    		background-position: -120px 0px

    and replace it with appropriate php in the header, (see “3”). EG:

    if ( is_page('home') ) { $current1 = 'navigation-1 a'; }
    elseif  ( is_category('bla') ) { $current2 = 'navigation-2 a'; }


    I am sure someone smarter can show a better way, but no one has that I can find!



    oops, forgot item 5!

    5. In the header under the php in item 4, put in something like the following styling:

    <style type="text/css">
    ul#navigation li#<?php echo $current1; ?> {
    background-position: -120px 0px;
    ul#navigation li#<?php echo $current2; ?> {
    background-position: -120px -39px;

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS Sprites on Current Page’ is closed to new replies.