Changing menu and module "bottom" colors, adding styles

Hi,

There will be an answer in the forum, i'm sure, but i tried to find it out and it did not work...
First, i'm working on local, so no back end password.
I need to easily change the background of the menu and the bottom module colors from black to other-kind color, Is it a really fast way by override.css to do it?

I tried:

Code: Select all

/*menu color*/

#gkMainMenu > div > ul > li:hover > a, #gkMainMenu > div > ul > li:active > a, #gkMainMenu > div > ul > li:focus > a {
color:#e73240;
}
#gkMainMenu > div > ul div.childcontent li.active > a, #gkMainMenu > div > ul div.childcontent li.active > span, #gkMainMenu > div > ul div.childcontent li:hover > a, #gkMainMenu > div > ul div.childcontent li:hover > span, #gkMainMenu > div > ul div.childcontent li > a:hover, #gkMainMenu > div > ul div.childcontent li > span:hover, #gkMainMenu > div > ul div.childcontent li.active > a > span, #gkMainMenu > div > ul div.childcontent li.active > span > span, #gkMainMenu > div > ul div.childcontent li:hover > a > span, #gkMainMenu > div > ul div.childcontent li:hover > span > span, #gkMainMenu > div > ul div.childcontent li > a:hover > span, #gkMainMenu > div > ul div.childcontent li > span:hover > span {
background:#e73240;
}

but it is not working...

Then... since "the one" I'm working for had this nice idea (please do not point at me, i'm just doing what the others want) of having 3 different color for the menu in 3 different pages, i'm wondering how i can do it.

Easy solution i have, since i do not need different styles in the template is to make a copy of style1.css and use it also as style2.css, style3.css just changing the menu color there (if the color is written or can be wrote there), assign different pages to the different styles and it's done.

The trick should work...
now the big question is where to change in order to achieve this result the menu and bottom module color?

Menu background color is in below css class, you can add it to override.css file.

Code: Select all

#gkMainMenu > div > ul  { background: #151515; }


Bottom module color comes from following css code.

Code: Select all

#gkBottomWrap { background: #111111; }


You can use suffixes for pages in template settings > features > suffixes for pages.

Lets assume we have following menu items and menu item ids. ( see main menu , end of each menu item )

Home: 101
News : 200
Videos: 203

Lets assume we have following menu color variations for menu background and bottom module background.
black, white , yellow

Now in suffixes for pages you can add following for each menu item. Click on add rule for each set.

ItemID/Option: 101
Suffix: blackmenu

ItemID/Option: 200
Suffix: whitemenu

ItemID/Option: 203
Suffix: yellowmenu

You end up with following same as in below image.


Now in your override.css add following codes. Colors are just an example, change them as you require.

Code: Select all

.blackmenu #gkMainMenu > div > ul  { background: #000; }
.blackmenu #gkBottomWrap { background: #000; }

.whitemenu #gkMainMenu > div > ul  { background: #fff; }
.whitemenu #gkBottomWrap { background: #fff; }

.yellowmenu #gkMainMenu > div > ul  { background: #yellow; }
.yellowmenu #gkBottomWrap { background: #yellow; }


Now depending on your menu item you will get different colors. Make sure override.css is enabled.

See you around...

Dear Norman...

I love you, i'm going to try...


(finger crossing)

Sorry

I just saw an error i did not considered before,
I need to modify also the hover color of the menu.

I mean, now i'm in the "red style" if i'm making the menu with a red bkg it will be a mess...

do you know the code to change not only the bkg but also the color for the mouse hover?

Hover class as below

You can use one general hover color as below;

Code: Select all

#gkMainMenu > div > ul > li:hover > a,
#gkMainMenu > div > ul > li:active > a,
#gkMainMenu > div > ul > li:focus > a {
   color: #e9403b;
}


or you can use your it together with previous page suffix such as below example;

Code: Select all

.blackmenu #gkMainMenu > div > ul  { background: #000; }
.blackmenu #gkMainMenu > div > ul > li:hover > a,
.blackmenu #gkMainMenu > div > ul > li:active > a,
.blackmenu #gkMainMenu > div > ul > li:focus > a  { background: #fff; }
.blackmenu #gkBottomWrap { background: #000; }


See you around...

hi mate,

sorry, i need also the "onclick" menu color since it is different from the hover, i try to open the css but i did not find it...

can you hel me?

I do not think we have onclick css for our menu.

See you around...

I do not think we have onclick css for our menu.

Think i'm getting miunderstood,

i'm speaking about this:

Schermata 2012-07-30 a 08.50.45.png

As you can see the "home" button when i'm in the page of it, it's the same color of the bkg...
I'd like to change it as white or yellow, or whatever...

Since I'm here, another question...
The style color for the bottomwrap text is grey, where i can change this?

Schermata 2012-07-27 a 14.49.55.png

You can use below css which is for "active" class

Code: Select all

#gkMainMenu > div > ul > li.active a { color:#fff;}


Regarding "About Us" module; That module is a custom html module and uses body font color which is #777777.

If you want you can change it by editing module settings > in editor click on html source and add below html code. Notice "aboutus" class in div tag. We will use that to override the font color.

Code: Select all

<div class="aboutus">
<p>
<em>Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</em>
</p>
</div>


Add below css for above font color change.

Code: Select all

.aboutus { color:#fff;}


See you around...

Ok, thank you... i did it!
actually i did not try yet the page suffix, but it is quite easy (it seems)

No problem at all, yes page suffixes is easy and gives you more power.

See you around...