[marklauber]

marklauber

#2566

Hi:

How do I change the color of the Header Menu tabs?

How do I change what the shape of the Header Menu tabs?

Thanks, Mark

[Kenneth John Odle]

Kenneth John Odle

#20911

Moved to support. Please be sure to post in the correct section.

The menu tabs are a sprite image. You can edit the sprite image itself (using Photoshop or GIMP) and adjust your CSS to use the new image, or you can use background-url:none in the CSS and then style it just using color codes. More information about sprites is here.

As far as changing the shape, you would apply a rounded border. Some more information about that is here.

There’s been a lot of talk about changing the appearance of the menus in this forum. Please search around; I’m sure most of your questions have already been answered. Let us know if you get stuck on something.

[marklauber]

marklauber

#20912

Kenneth:

I was only able to find the sprite image in the “style-light.css” style sheet. However any changes I made, did not change the menu section at all.

Any thoughts?

Thanks, Mark

[Anonymous]

Anonymous

#20913

The file you must adjust is a .png file. You will need to use photoshop (or it’s equivalent) to add a new layer with your new color. It is located in /graphene/images/sprite_h.png

Also, you can do as Ken suggested, and change the call in style-light.css to call a separate image instead, or use it to add your own colors using css.

Look for #header-menu in the style-light css file. This is where you should make your adjustments.

[marklauber]

marklauber

#20914

Josh thanks again for your help, there is no #header in the style-light.css file, here’s the file contents:

#top-bar {

background: url(“images/sprite_h_light.png”) repeat-x scroll left -196px #eee;

border-color:#bbb;

}

#header {

border-color:#999;

}

#nav {

background: url(“images/sprite_h_light.png”) repeat-x scroll left top #eee;

border-top:1px solid #bbb;

}

#nav .menu li a,

#nav .menu li a:visited {

color: #000;

}

#nav .menu li a:hover,

#nav .menu li:hover a,

#nav .menu li:hover a:visited,

#nav .menu li a:hover,

#nav .menu li.sfhover a,

#nav .menu li.sfhover a:visited,

#nav .menu li.current-menu-item a,

#nav .menu li.current_page_ancestor a,

#nav .menu li.current-category-ancestor a,

#nav .menu li.current-menu-parent a,

#nav .menu li.current-menu-ancestor a,

#nav .menu li.current_page_parent a,

#nav .menu li.current-menu-item a:visited,

#nav .menu li.current_page_ancestor a:visited,

#nav .menu li.current-category-ancestor a:visited,

#nav .menu li.current-menu-parent a:visited,

#nav .menu li.current-menu-ancestor a:visited,

#nav .menu li.current_page_parent a:visited {

}

#nav .menu li:hover,

#nav .menu li.sfhover,

#nav .menu li.current-menu-item,

#nav .menu li.current_page_ancestor,

#nav .menu li.current-category-ancestor,

#nav .menu li.current-menu-parent,

#nav .menu li.current-menu-ancestor,

#nav .menu li.current_page_parent {

background: url(“images/sprite_h_light.png”) repeat-x scroll left -66px #000;

}

#nav .menu li:hover li a,

#nav .menu li:hover li a:visited {

background: #fff;

color: #000;

}

#nav .menu li.current_page_item > a,

#nav .menu li.current_page_ancestor > a,

#nav .menu li.current_page_parent > a,

#nav .menu li.current-menu-item > a,

#nav .menu li.current-menu-parent > a,

#nav .menu li.current-menu-ancestor > a,

#nav .menu li.current_page_item > a:visited,

#nav .menu li.current_page_ancestor > a:visited,

#nav .menu li.current_page_parent > a:visited,

#nav .menu li.current-menu-item > a:visited,

#nav .menu li.current-menu-parent > a:visited,

#nav .menu li.current-menu-ancestor > a:visited {

background: #000;

color: #DFEDFF;

}

#nav .menu li.current_page_item a li a,

#nav .menu li.current_page_ancestor a li a,

#nav .menu li.current_page_parent a li a,

#nav .menu li.current_page_item a li a:visited,

#nav .menu li.current_page_ancestor a li a:visited,

#nav .menu li.current_page_parent a li a:visited,

#nav .menu li.current-menu-item a li a:visited,

#nav .menu li.current-menu-parent a li a:visited,

#nav .menu li.current-menu-ancestor a li a:visited {

background: #fff;

color: #000;

}

#nav #secondary-menu.menu li a:hover,

#nav #secondary-menu.menu li:hover a,

#nav #secondary-menu.menu li:hover a:visited,

#nav #secondary-menu.menu li a:hover,

#nav #secondary-menu.menu li.sfhover a,

#nav #secondary-menu.menu li.sfhover a:visited,

#nav #secondary-menu.menu li.current_page_item a,

#nav #secondary-menu.menu li.current-menu-item a,

#nav #secondary-menu.menu li.current_page_ancestor a,

#nav #secondary-menu.menu li.current-category-ancestor a,

#nav #secondary-menu.menu li.current-menu-parent a,

#nav #secondary-menu.menu li.current-menu-ancestor a,

#nav #secondary-menu.menu li.current_page_parent a,

#nav #secondary-menu.menu li.current_page_item a:visited,

#nav #secondary-menu.menu li.current-menu-item a:visited,

#nav #secondary-menu.menu li.current_page_ancestor a:visited,

#nav #secondary-menu.menu li.current-category-ancestor a:visited,

#nav #secondary-menu.menu li.current-menu-parent a:visited,

#nav #secondary-menu.menu li.current-menu-ancestor a:visited,

#nav #secondary-menu.menu li.current_page_parent a:visited {

background: #fff;

color: #000;

}

#nav #secondary-menu.menu li a,

#nav #secondary-menu.menu li a:visited {

color: #ccc;

}

#rss a {

background: url(“images/sprite_master_light.png”) no-repeat scroll left top transparent;

}

#top_search button {

background: url(“images/sprite_master_light.png”) no-repeat scroll -38px top transparent;

}

Thanks, Mark

[Kenneth John Odle]

Kenneth John Odle

#20915

You don’t need to post the content of that file. We all have it already. (That’s an old version of the theme, BTW.)

If you are going to change the appearance of the header menu, don’t bother using the “light header menu” option. It just complicates things.

For ideas, look at my bookblog and see how I have my menus arranged: http://bookblog.kjodle.net/

Now, take a look at the stylesheet: http://bookblog.kjodle.net/wp-content/themes/graphene_maps/style.css You can the changes I made in the section marked “Navigation”

I was planning on writing a tutorial about changing the navigation menus in Graphene, but I’m waiting to see how many CSS changes there are in version 1.6 (which has yet to be released) first. Why haven’t you updated to the latest version yet?

[marklauber]

marklauber

#20916

Ken:

I have just taken over responsibility for the website. Also they never implemented the child theme so with an update who knows what will happen.

Would you suggest I do the upgrade anyway and implement the child theme properly? It might be the best approach for the long run.

Thanks, Mark

[Kenneth John Odle]

Kenneth John Odle

#20917

In that case, yes, update the theme and create a child theme. The latest updates Syahir has made to the theme make it so much easier to make the kinds of changes most people want to make. (The new menu options, along with the action hook widget areas make it worth updating alone.) Keep a copy of the old stylesheet, so you can add those changes over to the new child theme.

This is probably going to be a bit of work, but it will definitely be worth it.

[Kenneth John Odle]

Kenneth John Odle

#20918

Also, be sure to check out some of the sites mentioned in the showcase: https://forum.graphene-theme.com/graphene-showcase/ You can get a lot of ideas and hints/tips there.