Where do i change the colour for menu only ?

liamb2001

Joined: 2006-11-20
Posts: 42
Posted: Sun, 2010-03-28 13:20

hiya, i have been looking in the css files and have managed to change the menu background color but cannot figure out how to change the actual text colour in the menu only, could you tell me how i would do this please ?
 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Sun, 2010-03-28 15:03

Replace the stars in ' #****** ' by the hex code of your new color.

1. Main Menus:
Search for those entries and change them in the file /themes/wind/css/screen.css :

/* The menus color */
.sf-menu li li,
.sf-menu li li ul li {
  background-color: #******;
}

/* Menu's color when you hover the mouse pointer over */
.sf-menu li:hover {
  background-color: #******;
}

2. Sub-Menus:
Add those entries to the end of the same css file :

/* The color of the separator lines appear between sub-items */
.sf-menu a {
	border-top: 1px solid #******;
}

/* The sub-menus colors */
.sf-menu li {
	background: #******;
}

/* Sub-menu's color when you hover the mouse pointer over */
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background: #******;
}

Note: Exclude the comments (the strings between /* .. */) and ' #****** ' when you search. I put them just to clarify.

---------------
P.S. Oh, sorry! I've realized now that I misunderstood. So you want to change the menus text color. Anyway, I'll keep the instructions above so anyone can use them if he needs. And this is how you change what you want..
3. Menus Text Color:
Search for those entries and change them in the file /themes/wind/css/screen.css :

a,
.g-menu a,
#g-dialog a,
.g-button,
.g-button:hover,
.g-button:active,
a.ui-state-hover,
input.ui-state-hover,
button.ui-state-hover {
  color: #****** !important;
  cursor: pointer !important;
  text-decoration: none;
  -moz-outline-style: none;
}

Note: the new color will effect all other links, too (i.e. RSS feeds.)
 
jusie

Joined: 2007-06-21
Posts: 48
Posted: Fri, 2010-10-08 17:15

Can someone help me with a similar issue...

I have installed Gallery 3.0 and am editing the 'wind' theme to make it yellow/orange. I think I'm nearly done but the menu is still partly blue (the 'collapsed' and hover bits).

In screen.css I've made the following changes to the menu style:

.sf-menu li li,
.sf-menu li li ul li {
  background-color: #FFFFC4;
}

.sf-menu li:hover {
  background-color: #FFFFC4;
}

After numerous page refreshes, my gallery menu still looks like this:

[img]http://img403.imageshack.us/img403/1595/menu01.jpg[/img]

and Firebug displays the following CSS info for the menu:

[img]http://img827.imageshack.us/img827/892/menu02.jpg[/img]

[img]http://img100.imageshack.us/img100/3633/menu03v.jpg[/img]

I can't find these two blue colour codes anywhere in the CSS files! Where do I need to look for them?

Thanks for any hints or advice.
 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Fri, 2010-10-08 20:00
Quote:
I have installed Gallery 3.0 and am editing the 'wind' theme to make it yellow/orange.

Piece of advice. Don't edit the wind theme directly, make a copy. Any future upgrade will overwrite your changes.
http://codex.gallery2.org/Gallery3:Tutorials:Themes

Ah a breath of fresh air, someone already knows about Firebug :)

What happens if you add this:

.sf-menu li,
.sf-menu li li,
.sf-menu li li ul li {
  background-color: #FFFFC4;

.sf-menu li:hover,
.sf-menu a:hover {
  background-color: #FFFFC4;
}
}

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
 
jusie

Joined: 2007-06-21
Posts: 48
Posted: Sat, 2010-10-09 19:20

That did the trick! Thank you so much.

In case anyone else ends up looking for the same thing - the blue 1px border at the top of each menu item also did my head in - I double checked and none of the css files contains blue #CFDEFF!

Anyway in screen.css I added

.sf-menu a {
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #D04000;
  padding: 0.75em 1em;
}

and that changed the border colour. I still don't understand where the blue came from though.

And yes nivekiam you're right, I have now copied the theme folder to make it a new theme.
 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Sat, 2010-10-09 19:50

If you look at the combined css at the top of each "section" is the path to the css file that was grabbed and combined. All the "sf" (superfish) stuff is located by default at:
/* lib/superfish/css/superfish.css */

However, you're already doing the right thing by overriding these in your screen.css.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here