Eliminate the shadow on the gk menu and modify text colors

Hi all !
How can i modify gk menu text color and how can i delete shadow behind the text?
In which css file are ?

Hi,

You can use this file: /templates/gk_black_and_white/css/style1.css

Code: Select all

/* menu */
#gkMainNav { background: #fff url('../images/style1/menu_bg.png') repeat-x 0 0; border: 1px solid #1c1c1c; }
#gkMainNav .level0>li { color: #fff; }
#gkMainNav .level0>li>a { color: #fff; background: transparent url('../images/style1/menu_separator.png') no-repeat 0 0; }
#gkMainNav .level0>li.haschild>a>span,
#gkMainNav .level0>li.haschild-over>a>span { background: transparent url('../images/style1/menu_bullet.png') no-repeat right center; }
#gkMainNav .level0>li.haschild-over:hover>a>span { background: transparent url('../images/style1/menu_bullet_hover.png') no-repeat right center; }
#gkMainNav .level0>li.active>a { color: #a8a592!important; }
#gkMainNav .level0>li.active:hover>a { color:#fff!important; }
#gkMainNav .level0>li:hover { background: #a39f8c; color: #fff; }
#gkMainNav .level0>li:hover>a { color: #fff; }
#gkMainNav ul.level0>li>div.childcontent li.haschild,
#gkMainNav ul.level0>li>div.childcontent li.haschild-over { background: transparent url('../images/style1/bullet_submenu.png') no-repeat 95% center; }
#gkMainNav ul.level0>li>div.childcontent li.haschild-over:hover { background-image: url('../images/style1/bullet_submenu_hover.png')!important; }
#gkMenu ul.level0 div.childcontent { background: #a39f8c; }
#gkMenu ul.level0 div.childcontent a { color: #f1eede; }
#gkMenu ul.level0 div.childcontent ul li:hover, #gkMenu ul.level0 div.childcontent ul li:hover>a { color: #fff; }
#gkMenu ul.level0 div.childcontent ul li { border-top: 1px solid #908c7a; }
#gkMenu ul.level0 div.childcontent div.group-title .menu-title { color:#F1EEDE; }
#gkMenu ul.level0 div.childcontent div.group-title .menu-desc { color:#F1EEDE; }
#gkMenu ul.level0 div.childcontent div.childcontent { border: 1px solid #908c7a; }
#gk-subnav { background: #252525; }
#gk-subnav>div>ul>li a { color: #fff; }
#gk-subnav>div>ul>li>a:hover, #gk-subnav>div>ul>li.hover>a { background: #a39f8c; color: #fff!important; }
#gk-subnav>div>ul ul { background: #a39f8c; }
#gk-subnav>div>ul ul a { color: #fff; }
#gk-subnav>div>ul ul li:hover, #gk-subnav>div>ul ul li:hover>a { color: #fff; }
#gk-subnav>div>ul ul li { border-top: 1px solid #908c7a; }
.gk-bottom .gk-box-center > div, .gk-bottom .gk-box-right >div { border-left: 1px solid #d6d5cb; }


Thanks !
Can you point me the line where is the shadow for the menu ? I want to eliminate it.

You could try looking in the template.css file for the following fragment.

Code: Select all

#gkMenu .level0 > li > a, #gkMenu .level0 > li > span {
  text-shadow: 0 0 3px #000000;
}


To change it add a new rule to your override.css file.

You could try this for the main items:

Code: Select all

#gkMenu .level0 > li > a, #gkMenu .level0 > li > span {
  text-shadow: 0;
}


And this for the child items:

Code: Select all

#gkMenu ul.level0 div.childcontent a {
text-shadow: 0;
}


Oh and to override the default colours for text, borders and links add rules like this to your override.css file.

Code: Select all

#gkMainNav .level0>li { color: #ff0000!important; }
#gkMainNav .level0>li.active>a { color: #A9C7D6!important; }
#gkMainNav .level0>li.active:hover>a { color:#ff0000!important; }


You can use firebug to locate the code fragments to change. You can also temporarily test the changes on the live site directly in real time.

Or you can use the style1.css file posted by Don Lee above. Just select the element rules from the code which you would like to override. Paste them into the override.css file and change the colour attribute as in the example above.

Thanks for everything guys!
Now the last problem i have. I want to change the hover color in red in the submenu nav and i dont find where the code is. I give a image.

Can you give me your site URL then I could give you exact code to change?

Code: Select all

#gkMenu ul.level0 div.childcontent ul li:hover, #gkMenu ul.level0 div.childcontent ul li:hover > a {
    color: #FF0000;
}


Ok problem solved line 67 in templates\gk_black_and_white\css

It would be better to apply those changes to the override.css file if you value your sanity when it comes to updates.

If the change has no effect in the override.css ensure you have added the !important tag to the css statement to give it more authority.

file: jroot/templates/yourtemplate/css/override.css

Code: Select all

#gkMenu ul.level0 div.childcontent ul li:hover, #gkMenu ul.level0 div.childcontent ul li:hover > a {
    color: #FF0000!important;
}