sprites & current_page_item & background position

  • In most instances, li.current_page_item is enough to style your current menu item produced by wp_list_pages(). For example, you can change border-width for current_page_item without disrupting the border-colors you’ve assigned to each particular page_item_number.

    However, if you use Sprites (background icon array in a single image file), there’s a limitation. They require two position offsets. The first sets the particular icon. The second relates to the link state (hover, active, current).

    If you have:

    li.page-item-1 a { background-position:10px -30px; }
li.page-item-2 a { background-position:20px -30px; }
li.page-item-3 a { background-position:30px -30px; }

    You can hover:
    li.page-item-1 a:hover { background-position:10px -60px; }

    But you can’t set current_page_item…
    li.current_page_item a { background-position:???px -90px; }
    …without disrupting the other offset

    So here are the questions:

    • Why does WP give each li a unique CLASS instead of a unique ID?
    • Is there a way to add item-number as an ID to the list-item or the link?
    • Is there a way to assign current_page_item to the link as a CLASS?

    any suggestions?

Viewing 1 replies (of 1 total)
  • Thread Starter Matthew Willse

    (@thecoup)

    p.s. If you don’t know what a Sprite is…

    All menu icons on yahoo’s homepage come from this single image. Each link repositions it as a background image.

    Why do they do this? Each visit to yahoo then only requires one hit to the server to load one single image. The browser handles the rest. Also, 20 small gifs will yield a much higher file size than 1 large gif. But this is a secondary advantage compared with server hits.

    What I’m doing above is similar. It adds another set of hover icons to the single image file. They would display instantly without the need for any javascript prefetch.

Viewing 1 replies (of 1 total)
  • The topic ‘sprites & current_page_item & background position’ is closed to new replies.