Skip to:
Content
Pages
Categories
Search
Top
Bottom

Admin Bar CSS — background color


  • josh
    Participant

    @socialapples

    14 years, 4 months ago

    I’m trying to figure out what I need to add to my child theme’s CSS to make the admin bar menus a certain color. I’ve already figured out the hover colors, but i’m missing the actual background coloring.

    Take a look at socialapples.com and you’ll see what I mean. You’ll have to sign up to see the whole problem… sorry. When I hover over “My Account” I’ve been able to change the hover color to blue, but the whole drop down is still black… or some other dark color. I’d love to have the whole drop down be the blue color i’m using instead of the dark color that’s beneath my blue hover. Any thoughts?

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

  • Hugo Ashmore
    Participant

    @hnla

    14 years, 4 months ago

    #wp-admin-bar ul li ul {}

    Around line ~140 adminbar.css

    place the selector ruleset in your style.css and add your new background.


    josh
    Participant

    @socialapples

    14 years, 4 months ago

    Awesome, thanks @hnla — I have that portion fixed.

    I’m still missing something though… When I hover over “My Account” and then move down to one of the submenus, “My Account” still has the dark background. The same happens when I move from a submenu like “Activity” to one of its menus to the right. There’s also a little block of about 10 or so pixels on the right that stays dark as I hover. Lastly, is there a way to put a border around the whole menu when I hover? Right now, it’s just outlining the sides and the bottom. Looks kinda funny but I’m just being picky. :D

    Link to screenshot:

    http://socialapples.com/images/menus.png

    I’d greatly appreciate your help. Thanks!


    josh
    Participant

    @socialapples

    14 years, 4 months ago

    One more, sorry… what’s the proper code for editing the text of the admin logo?


    Hugo Ashmore
    Participant

    @hnla

    14 years, 4 months ago

    Look through the rulesets for all instances where you see the background is stated as #333 these would need to change.

    The reason the parent element retains an active state even though not being hovered is that scripting is used (classic suckerfish sfhover – used to provide hover on non anchor elements for IE <= 6) this adds a class of .sfhover to parent elements.

    Around line ~117 there is a grouping of selectors, the ruleset adds a background to each of these selectors and it’s there you will need to make further mods – if necessary breaking apart the grouping if it’s not required that all those elements have the same background.

    Ruleset looks like this:

    #wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover {
    background-color: #333;
    }

    you can try adding a border but must be wary of the fact that dropdowns are very sensitive to position, the hover can be disrupted quite easily and moving from parent to child can loose focus, but try dropping this in your styles and have a play around:

    #wp-admin-bar ul.main-nav ul {border:1px solid red;}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Admin Bar CSS — background color’ is closed to new replies.

Topic Info

Skip to toolbar