WordPress.org

1. Wanted2b
   Member
   Posted 9 months ago #
   

   Hey guys,

   i am currently working on a project for my semester at my university. I want to build homepage for a PR Agency in Germany. It is my first time building a page, so i am relatively new to this stuff.
   On this page: i want to change the colors of the font. When you click on "Leistungen" and then hover over it, every subsite name is shown in grey. How can i change that? I want to have every name there in black,so that you can read it better...

   What i already found out with firebug and changed in the CSS window is shown below. Maybe i made a mistake there, because i dont understand it for 100%. I really came to this settings by trial and error. ;)
   '
   #access li a:hover {
   background: #ff9900 !important;
   color: Black !important;
   }

   #access ul ul a {
   background: none repeat scroll 0 0 #ff9900 !important;
   height: auto;
   line-height: 1em;
   padding: 10px;
   }

   #access li:hover > a, #access ul ul *:hover > a {
   background: none repeat scroll 0 0 #ff9900;
   color: black !important;
   }

   #access ul ul {
   background: none repeat scroll 0 0 #ff9900;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   display: none;
   float: left;
   left: 0;
   position: absolute;
   top: 38px;
   z-index: 99999;
   }
   #access a {
   color: black;
   display: block;
   line-height: 38px;
   padding: 0 10px;
   text-decoration: none;
   }
   '

   Thank you in advance!

   http://wordpress.org/extend/themes/brunelleschi/

2. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   When you're changing CSS, are you using a Child Theme?

3. Wanted2b
   Member
   Posted 9 months ago #
   

   No i did it all in this little window in brunelli options. How do i do that?

4. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   little window in brunelli options

   Is this a Custom Style or Custom CSS option?

5. Wanted2b
   Member
   Posted 9 months ago #
   

   In Brunelli Theme options there is one little window, where you can put your code in. It says: Custom CSS. Hope it helps..

6. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   This sounds correct.
   To change the colour of selected menu items, try;
   

   #access ul li.page_item a:visited {
    color: yourColour;
   }

7. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   To change the colour of hovered menu items, try;
   

   #access li:hover > a,
   #access ul ul :hover > a {
    color: yourColour !important;
   }

   Remember to add !important at the end.

8. Wanted2b
   Member
   Posted 9 months ago #
   

   Hey thanks for your help!

   Only last problem is still when you click on "leistungen" every other subsite in the navigationbar is still grey...

   i already put your code into the window and saved it like this now:

   '#access li a:hover {
   background: #ff9900 !important;
   color: Black !important;
   }

   #access ul ul a {
   background: none repeat scroll 0 0 #ff9900 !important;
   height: auto;
   line-height: 1em;
   padding: 10px;
   }

   #access li:hover > a, #access ul ul *:hover > a {
   background: none repeat scroll 0 0 #ff9900;
   color: black !important;
   }

   #access ul ul {
   background: none repeat scroll 0 0 #ff9900;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   display: none;
   float: left;
   left: 0;
   position: absolute;
   top: 38px;
   z-index: 99999;
   }
   #access a {
   color: black;
   display: block;
   line-height: 38px;
   padding: 0 10px;
   text-decoration: none;
   }

   #access ul li.page_item a:visited {
   color: #666666 !important;
   }
   #access li:hover > a,
   #access ul ul :hover > a {
   color: black !important;
   }'

9. Andrew Nevins
   Volunteer Moderator
   Posted 9 months ago #
   

   Only last problem is still when you click on "leistungen" every other subsite in the navigationbar is still grey..

   Sorry I don't understand what you mean by 'subsite'.

10. Wanted2b
    Member
    Posted 9 months ago #
    

    If you click on leistungen, it will turn grey, which is ok. But when you now hover over leistungen, every name below is also grey.
    How can i change the color of that?

11. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #
    

    I think these selectors
    

    #access ul ul :hover > a

    Within this style
    

    #access li:hover > a,
    #access ul ul :hover > a {
    color: black !important;
    }

    Controls colour to the sub-menu links.

12. Wanted2b
    Member
    Posted 9 months ago #
    

    Sorry but i don't understand what i have to change now?
    I want to have the fontcolor of sub-menu links in black like the top navigation already is.
    Would you be so kind to help me where i must write what code? Thank you very much!!

13. Wanted2b
    Member
    Posted 8 months ago #
    

    I changed this color in :
    '#access li:hover > a,
    #access ul ul :hover > a {
    color: black !important;
    }'

    to white- well it changes only the hover color, but that was already ok with black.

    What i meant is, when you click on "leistungen" it'll turn to grey. That's fine, but all other sub-menu links will also turn to grey. I want these submenu to behave like the mainmenu links. So they should be black and only change to grey, when you're actually on this site.

    Do you have any idea to change this?

14. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #
    

    The main menu links are controlled by
    

    #access li:hover > a

    The sub menu links are controlled by
    

    #access ul ul :hover > a

    To avoid applying the style to the sub menu links, remove that line (and subsequent comma).

    E.g
    you want something like this
    

    #access li:hover > a {
     color: black !important;
    }

15. Wanted2b
    Member
    Posted 8 months ago #
    

    Hm i cannot change that problem :( Is it possible, that some previous code is in conflict with this new one?
    Here is everything in my Custom CSS box about the navigation colors:

    #access li a:hover {
    background: #ff9900 !important;
    color: Black !important;
    }

    #access ul ul a {
    background: none repeat scroll 0 0 #ff9900 !important;
    height: auto;
    line-height: 1em;
    padding: 10px;
    }

    #access li:hover > a, #access ul ul *:hover > a {
    background: none repeat scroll 0 0 #ff9900;
    color: black !important;
    }

    #access ul ul {
    background: none repeat scroll 0 0 #ff9900;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    position: absolute;
    top: 38px;
    z-index: 99999;
    }
    #access a {
    color: black;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
    }

    #access ul li.page_item a:visited {
    color: #666666 !important;
    }
    #access li:hover > a {
    color: black !important;
    }

    Is it maybe because of the bold printed code? Do i have to put some more code there, which excludes submenulinks in there?

16. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #
    

    Also add this
    

    #access ul ul :hover > a {
     color: #yourColour !important;
    }

17. Wanted2b
    Member
    Posted 8 months ago #
    

    I added it, but i get this grey in my submenu links again. When i hover over it :(

18. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #
    

    What value are you using for your color: on the sub menu hover.

19. Wanted2b
    Member
    Posted 8 months ago #
    

    I wrote

    #access ul ul :hover > a {
    color: black !important;
    }

20. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #
    

    I don't see what you mean, the "grey" links.
    All I see is black links
    http://awesomescreenshot.com/03ce6o6a0
    And the same when I hover.

    I'm using Chrome 21.0 on Windows.

    Are you sure you've cleared your browser cache?

    [ Moderator note: unless there is a good reason, please do not abuse the modlook tag. ]

21. Wanted2b
    Member
    Posted 8 months ago #
    

    You have to click on "Leistungen" first and then hover over Leistungen again. Then the submenu links will be grey.

22. Andrew Nevins
    Volunteer Moderator
    Posted 8 months ago #
    

    Still can't replicate.
    Which browser are you using?

23. Wanted2b
    Member
    Posted 8 months ago #
    

    Hm I also use Chrome 21, Windows 7. I cleared my cache and it is still grey.

    I will make a screenshot for you.

24. Wanted2b
    Member
    Posted 8 months ago #
    

    https://dl.dropbox.com/u/8663736/Leistungen%20%C2%BB%20Redaktionsb%C3%BCro%20Beatrix%20Polgar-%20St%C3%BCwe.png

Reply

You must log in to post.