WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To remove black hovering bg from the menu of 2010? (19 posts)

  1. Tara
    Member
    Posted 3 years ago #

    Hi all,

    I have generated the menu from the admin area. When I hover over any item, I see this black bg. How do I get rid of it?

    I tried striking out some 'background:#333' in style.css but that did not do the trick. Please guide. thanks

  2. @t-p,

    Remove this whole section or better yet comment it out in case you ever decide you want your grey hover back.

    #access li:hover > a, #access ul ul :hover > a {
    background: #333333;
    color:#FFFFFF;
    }

    To comment out change the above to:

    /*#access li:hover > a, #access ul ul :hover > a {
    background:none repeat scroll 0 0 #333333;
    color:#FFFFFF;*/

    If your planning on learning how to do some theme customization may I suggest you adding the Firebug Plugin for Firefox which lets you edit the css right in the browser so you can see the changes take place as you make them.

  3. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital for your advice and guidance,

    after making the above change you suggested, it's still showing up!!
    Any other suggestions?

  4. The css I posted removes the gray background when the mouse hovers over the menu item. It does not remove the black menu bar background.

    You can play around with the menu background by looking for anything in the css that has #access or .menu

    If you want to completely remove the black bar that appears under the header image you remove or change the background color from #000 which is black to another color.

    #access {
    background:#000000;
    display:block;
    float:left;
    margin:0 auto;
    width:940px;
  5. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital.

    I just want to the gray background when the mouse hovers over the menu item.

    This did not remove it.

    /*#access li:hover > a, #access ul ul :hover > a {
    background:none repeat scroll 0 0 #333333;
    color:#FFFFFF;*/

    After doing this, I still see gray background when the mouse hovers over the menu item.

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    assuming that you mean the horizpontal menu that comes with the standard TwentyTen:

    then the styles are:

    total menu bar:

    #access {
     background: #000;
     margin: 0 auto;
     width: 940px;
     display:block;
     float:left;
    }

    dropdown elements:

    #access ul ul a {
     background:#333;
     height:auto;
     line-height:1em;
     padding:10px;
     width: 130px;
    }

    hover:

    #access li:hover > a,
    #access ul ul :hover > a {
     color:#fff;
     background:#333;
    }

    change the color codes after the 'background: ' in the styles.

    if you have something different, please illustrate it with a link to your 'problem' site

  7. I think you added the commented out block I pasted. You need to remove lines 429-433 which should look exactly like alchymyth pasted under hover:

    #access li:hover > a,
    #access ul ul :hover > a {
    color:#fff;
    background:#333;
    }

    Also make sure you clear your browsers cache ctrl 'f5'

  8. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital for your help and patient.

    Imaging thing is that I have even tried removing ALL references to #333333 in my style.css. But still I cannot get rid of the gray background when the mouse hovers over the menu item!!I have given up on this.

    Obviously there is something else to it. But I can't figure it out.

    I am not a computer geek, but my civil engineering mind tells me that W3 team has unnecessarily made 2010 comlicated.

    I would like to ask you for help on one more thing before I totally give up on 2010 theme: How can I add say a RSS icon to the right corner of the menu bar?

    Thanks again.

  9. Before you give up can you try going to your header.php file and make a change to the line where it calls the css file by adding ?v=1 right before the end quote? It should look like this after you edit it:

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=1" />

    Then check and see if it works for you. If not please post a link so we can see whats going on.

    To add a rss feed icon go to the custom menu dashboard and under theme locations make sure menu1 is selected then click the save then put your feed address as a custom link label it rss and add to menu and drag it to the bottom and click save menu.

    Now view your site and you should have the rss added to the right side of your menu. Do a view source find <div id="access" role="navigation">

    There should be 1 line for each menu item and your new rss should be the last. Note what the <li id="menu-item-xx" is where xx being a number.

    Now add this to your css at the bottom with the correct menu-item-xx

    li#menu-item-xx  {
    background:url("http://link-your-rss-icon.xxx") no-repeat;
    height:70px;
    margin-left:400px;
    text-indent:-999em;
    width:60px;
    }

    the value for margin-left might be more or less depending on how many menu items you have. The height and width values should match the size of your icon.

  10. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital for your continous help and patient.

    My problem's root may this: I have saved all my changes as "mytheme" so that they don't get overwritten when I update in the future. I have selected "mytheme" from the dashboard>>appearnace...

    Now, do I need to add that name - "mytheme" - to any templates?

    I noticed in my dashboard that all available themes have thumbnails displayed (e.g., twentyten has "path" image...). Hoever, mytheme does not show any thumbnail eventhough I am using the same "path" image.

  11. You only need to change the name of the directory or folder and change the name here in style.css

    /*
    Theme Name: mytheme
    Theme URI: http://wordpress.org/
    Description: The 2010 default theme for WordPress.
    Author: the WordPress team
    Version: 1.0
    Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
    */
  12. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital for your continous help and patient.

    You are good instructor. With your simple to follow instructions I have resolved many issues I was struggling with.

    but this feeds icon for some reason does not want to show up. I have generated the menu from the admin area. In that menu bar several items including the item called "Feeds" with its submenu. The item "Feeds" and its submenu shows up with link labels as the last item in the menu in sequence, not in the right corner where I would like to see the icon and the link label "Feeds".

    I would like to see the feeds Icon next to the "Feeds" only, not in its submenu.

    I used the following in my css:

    li#menu-item-84  {
    background:url('images/rss-icon.gif") no-repeat;
    height:70px;
    margin-left:400px;
    text-indent:-999em;
    width:60px;
    }

    I also tried the full url with "http://path to gif", and I also tried different "margin-left" values. But the icon does not want to show up.

    What I am doing wrong? Thanks again for your help.

  13. Your quotes are mis matched
    background:url('images/rss-icon.gif") no-repeat;

    should be

    background:url('images/rss-icon.gif') no-repeat;

    Also the text-indent:-999em;

    will hide the Feeds label and replace it with the image. If you want the image next to the label

    #menu-item-57 a {
    background:url(http://graphics8.nytimes.com/images/global/icons/feed_icon_16x16.gif) no-repeat center;
    width:70px;
    margin-left:460px;
    }

    the width has to be wider in this instance to account for the width of the icon and the label

    I added it to my test install of twenty ten so you could see how it works. Go to this url to see it

  14. Another option which might be easier is to manually add it to the theme in header.php

    You would just place the link <a href="<?php bloginfo('rss2_url'); ?>" class="feed-link">Rss Feed</a> right after the nav menu before </div><!--#access -->

    Then to target it in css:

    a.feed-link  {
    background:url(http://graphics8.nytimes.com/images/global/icons/feed_icon_16x16.gif) no-repeat center right;
    float:right;
    width:60px;
    margin-right:10px;
    }
  15. Tara
    Member
    Posted 3 years ago #

    Thanks c3mdigital for your great help, and your time and patient.

    I saw thw website you reffered me to, it looks great.

    Does not matter what I do the image does not show up. Also, if I use the text-indent:-999em; it does not hide the "Feeds" label.

    Obviously something is making the "Feeds" label not to hide and the image to appear alone or with the "Feeds" label. I spent couple of days now, bot I cant figure it out.

    If this is any help, my menu bar abuts the to of the header image instead of at the bottom of the header image.

  16. If the text-indent is not hiding the label and the image is not showing it means that either you are targeting the wrong selector in css or the selector is being overridden somewhere in css.

    The only way to determine this is to use fire bug or web-kits inspect element.

  17. Tara
    Member
    Posted 3 years ago #

    Hi c3mdigital,

    Finally the image showed up! I think the problem was the css that I had added for the image was placed at the end of the style.css file. Then I moved it to the "Access" section of the file and it showed up!

    But it does not sit in line with rest of the menu labels - it has stretched the menu bar equal to its height (height=24px) and a little bit more (probably additional 10px or so). This what I have used:

    #menu-item-88  a {
         background: url('images/rss-icon.gif') no-repeat center;
    margin-left:745px;
    }

    Any more suggestions? Thanks for your great help, time and patient.

  18. Just adjust the height settings and margins till it looks right. Also try adding float:left; or float:right; and adding width and just keep adjusting till you get it right.

    Situations like this are where firebug can be your best friend. It allows you to open up a pop up window in your browser and make css adjustments and they are applied live to your page. Then you just copy and paste your changes back into your css file.

    http://getfirebug.com/

  19. Tara
    Member
    Posted 3 years ago #

    Fantastic!
    Thanks c3mdigital. You are good!

Topic Closed

This topic has been closed to new replies.

About this Topic