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”.
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;
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!
