CSS Question

  • w4atx

    (@w4atx)


    7 years, 7 months ago

    I’m using the Twenty-Ten theme and the following “additional CSS”:

    #access {background:#dcdcdc;}
#access a {color:#000;}
#access ul li.current_page_item a {color:#ff0000!important;}
#access li:hover a, #access ul ul:hover a {background:#dcdcdc; color:#000;}

#branding h1, #branding div {display:none;}
#branding img {border:none;}

    For current page menu item I get the bright red (ff0000) as long as the menu item has no subitems. If it does have subitems and one is selected, the parent menu item goes pale white. If you then hover over that menu you can see that the red color was assigned to the actual selected item. I’m looking to have that top item go red along with the selected item.

    Any help appreciated!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    I think this should do it:
    Modify the current rule in Additional CSS as follows
    #access li:hover a, #access ul ul:hover a {background:#dcdcdc; color:#f00;}

    If that doesn’t do it, please post a link to your site. Seeing the live site is the best way to determine which rules work.

    This rule will cause any items hovered over to be red, whether under the current page menu item or not.

    Thread Starter w4atx

    (@w4atx)

    7 years, 7 months ago

    Thanks for the reply…but not quite what I’m after. As you said, that makes everything hovered over red…even menus that have many subitems (which looks strange). I’m looking for red *only* after an item has been selected so that the user has a visual as to which menu they are under.

    Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    So the top level item gets colored, as does the current hover item, but nothing in between? I don’t see how that can be done with CSS alone. CSS styles are applied downwards, you can’t jump back up and apply something different to a grandparent element. To achieve the desired effect would require JavaScript to identify the proper grandparent element and alter its CSS during the hover.

    Thread Starter w4atx

    (@w4atx)

    7 years, 7 months ago

    OK…thanks! I’m wondering though, is there a piece of that code (or an additional piece) that controls that pale white color of the parent item when you select a child? That color looks really washed out.

    Moderator bcworkz

    (@bcworkz)

    7 years, 7 months ago

    The responsible rule starts at line 545 of theme style.css:

    #access ul li.current_page_item > a,
 #access ul li.current_page_ancestor > a,
 #access ul li.current-menu-ancestor > a,
 #access ul li.current-menu-item > a,
 #access ul li.current-menu-parent > a {
    color: #fff;
}

    The specific selector being used is #access ul li.current-menu-parent > a

    This may seem at odds with what I previously said about rules applied downwards. This only works for current page items that have specific class values. Applying rules to random elements on hover is a different thing entirely.

    Since you are modifying theme CSS, you’d be well served to learn to use your browser’s CSS inspector tool.(generally under developer tools) You can select any element on a page and it’ll show you what CSS is applied. It’ll also show you which elements on a page belong to certain HTML elements in page source code. Best of all, you can experiment with various CSS rules to find out what works before committing them to the site’s saved CSS. I’m more than happy to help you with this sort of thing, but I think you’ll be happier if you could help yourself 🙂

    • This reply was modified 7 years, 7 months ago by bcworkz. Reason: LFs in code
    Thread Starter w4atx

    (@w4atx)

    7 years, 7 months ago

    Many thanks for your help! I was able to edit the style.css and get exactly what I was looking for! I will have to do some more research into the CSS Inspector bit…thanks for that tip.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘CSS Question’ is closed to new replies.

Tags