WordPress.org

Forums

Graphene
[resolved] Changed colors in stylesheet for menu...how to change downarrow color (6 posts)

  1. daltonskygazer
    Member
    Posted 3 years ago #

    I just updated the CCS at my website, see my profile for location of site. I worked in stylesheet to change the menu colors. If you go to my website you will see for two of the menu items which have submenus the down arrows are still white. I can't find in code where to change these to the #cc3300 color I am using. Any help appreciated. Using graphene theme.

    BTW would be nice if future to add in graphene theme display, ability to change colors in the main menu along with the footer.

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

  2. kjodle
    Member
    Posted 3 years ago #

    The arrow is part of a sprite image. You will need to create a new image in order to change the color and then change the appropriate css.

    More information at the official Graphene theme support forum:
    http://forum.khairul-syahir.com/

    There is a lot of discussion there on how to accomplish this. Look around and I'm sure you'll find specifics. Just search for "sprite".

  3. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Post a link to your site if you want help...

    Or try using a tool such as Firebug to identify the CSS code that you need to change.

  4. daltonskygazer
    Member
    Posted 3 years ago #

    link to site is my username dot com or just look at my member profile for site.

    It is definetly the sprite image as noted by Kjodle. I would like to just shut reference to the sprite image off think this would be easiest. I see several references to ancestor for various menu sprites being called to create menu features. Just trying to figure out what code I could change so it doesnt look for that particuliar down arrow sprite on the menu bar leaving just the grayish color as seen in menu background, seems easier then going into photoshop and editing the arrow. Removing call to this arrow is what I am looking to do now as a solution. For reference some of code pasted below. I know it calls for arrow from one of the ancestor attributes calling for the down arrow image just not sure exactly what part in code calls it and I could change reference of url to none.

    }
    #header-menu,
    #secondary-menu {
    	margin: 0 10px;
    }
    #header-menu > li {
    	font: normal 14px arial;
    	margin: 0 0 0 5px;
    }
    #header-menu > li:first-child {
    	margin-left: 0;
    }
    #header-menu > li > a {
    	color: #cc3300;
    	line-height: 16px;
    	padding: 9px 10px 10px;
    }
    #header-menu > li > a > span {
    	display: block;
    	font-size: 11px;
    	color: #aaa;
    }
    #header-menu > li.menu-item-ancestor > a {
    	background: url(images/sprite_master.png) -877px -236px no-repeat transparent;
    	padding-left: 26px;
    }
    
    /* Top level header menu, hover and current state */
    #header-menu > li:hover,
    #header-menu > li.current-menu-item,
    #header-menu > li.current-menu-ancestor {
    	background: url(images/sprite_h.png) left -300px repeat-x #eee;
    }
    #header-menu > li:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    	color: #000;
    }
    #header-menu > li:hover > a > span,
    #header-menu > li.current-menu-item > a > span,
    #header-menu > li.current-menu-ancestor > a > span {
    	color: #484848;
    }
    #header-menu > li.menu-item-ancestor:hover > a,
    #header-menu > li.current-menu-item > a,
    #header-menu > li.current-menu-ancestor > a {
    	background-position: -877px -192px;
  5. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Looks like it is this background image -- line 606 in the graphene stylesheet:

    #header-menu > li.menu-item-ancestor > a {
        background: url("images/sprite_master.png") no-repeat scroll -877px -236px transparent;
        padding-left: 26px;
    }

    If you remove that background image, the sprite disappears.

  6. daltonskygazer
    Member
    Posted 3 years ago #

    That did the trick! Thanks!!! Much better looking!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic