WordPress.org

Support

Support » Themes and Templates » [Resolved] [Theme: Graphene] Changed colors in stylesheet for menu…how to change downarrow color

[Resolved] [Theme: Graphene] Changed colors in stylesheet for menu…how to change downarrow color

  • 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/

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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”.

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    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;
    WPyogi

    @wpyogi

    Forum Moderator

    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.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] [Theme: Graphene] Changed colors in stylesheet for menu…how to change downarrow color’ is closed to new replies.