WordPress.org

Ready to get started?Download WordPress

Forums

Top nav, add alternating image after each nav (li img 1, li img2, li img1) (6 posts)

  1. AardvarkGirl
    Member
    Posted 2 years ago #

    I'm doing a fun site that has a 'Las Vegas' vintage tacky sign theme. I created two small ani gif files that are supposed to be the blinking (running) light bulbs used on those old signs.

    So what I was thinking was, WordPress gets the first navigation
    <li>Home<img scr="img1.gif"></li> <li>About<img scr="img2.gif"></li> <li>Contact<img scr="img1.gif"></li> Etc.

    Anyone got any ideas how to do this? :D And yes, I'm being ambitious (LOL).

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. AardvarkGirl
    Member
    Posted 2 years ago #

    Is this CSS or a php thing?

    I don't think animated .gifs work when they are backgrounds (but gave it a try and yes you can)... so I thought this would be a php issue.

    Or were you thinking using the image as the actual 'bullet'? (which I wasn't thinking when I thought it up). But when I did look at the classes the LI's get assigned it seems there are two -

    1. page_item page-item-2 (or what ever the number it would be)
    2. current_page_item (which would obviously change whenever you change pages)

    How would you deal with the dynamic 'current_page_item' class?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    It's a CSS thing. The fact that the images are animated shouldn't make any difference. I had to do something vaguely similar on a site a few years back (the client insisted on it) and I didn't have any problems with it. But then I wasn't adding the animations to a dynamic menu - which is where you will start to hit problems.

    You could have a look at some advanced CSS selector techniques - such as
    http://www.w3.org/Style/Examples/007/evenodd.en.html

    The current_page_item class will need to be handled separately - possibly by using something like li:nth-child(even).current_page_item and li:nth-child(odd).current_page_item to cover both eventualities. But so check the results across a good range of common browsers as this the odd and even selectors may not be supported across them all.

  5. AardvarkGirl
    Member
    Posted 2 years ago #

    ESMI - Thanks so much for the reply.

    If the 'current page' class in WordPress is the bigger problem, is there a way to remove/disable that within the theme - because honestly, they don't need it.

    Going to read your link now.

  6. esmi
    Forum Moderator
    Posted 2 years ago #

    No - there isn't.

Topic Closed

This topic has been closed to new replies.

About this Topic