ThemeShaper Forums » Thematic

[closed]

Style individual current_page_item

(7 posts)
  • Started 3 years ago by Sabra
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. Sorry, I'm having trouble with the title..

    I have four menu items that I style individually by using the page-item-#id class:

    .page-item-#id {
          background: #whatever;
    }

    Now I want to style these item when they are the current page item, i.e. when the page they link to is active. But I can't for the life of me figure out what's the proper code. I can style the general .current_page_item link class, but not individually for each menu item.

    Can anyone offer help?

    Posted 3 years ago #
  2. i think if you want to target something that has 2 classes you just link the classes together like

    .page-item-#id.current_page_item {
       background: #whatevs;
    }

    no guarantees...

    Posted 3 years ago #
  3. Thanks a lot, that worked like a charm! I actually came up with code you provided, but put a space inbetween the two class names. Stupid!

    Posted 3 years ago #
  4. Or not...it worked with adding a colored bottom border, not with the rest. Here's my code:

    .page-item-2 a {
    	background-image: url(menu_03normal.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    .page-item-2 a:visited {
    	background-image: url(menu_03normal.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    .page-item-2 a:hover {
    	background-image: url(menu_03hover.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    
    .page-item-2.current_page_item {
    	background-image: url(menu_03hover.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }

    My menu tags a, a:hover, a:visited and the class .current_page_item are displayed as blocks. I simply want the a:hover background to remain 'active' while the visitor is on that current page.

    Posted 3 years ago #
  5. middlesister
    Member

    I think the .current_page_item gets applied to the parent li element and not to the link directly. Try adding the "a" element after .current_page_item:

    .page-item-2.current_page_item a {
    	background-image: url(menu_03hover.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }

    If you want the .current_page_item background to be exactly the same as a:hover, you could also simply add it to the list to avoid repeating yourself:

    .page-item-2 a:hover,
    .page-item-2.current_page_item a {
    	background-image: url(menu_03hover.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    Posted 3 years ago #
  6. Thanks mate, that worked like a charm. Menu's are driving me nuts! :) Now I only have funny white border-bottom on my active page-item that I need to solve...

    Posted 3 years ago #
  7. doesn't the current_page_item have a white border by default?

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.