change main menu and pop up color

Hello,

Where can i change the color of the main menu drop down and the pop up background color (cart pop up and login pop up), all of them are black and i need tho change that colors, thanks!

Could You please post an url to your site?
What colours would you like to change them to?

Hello,

I need to test different colors, i need to change the color of the background of the dropdown menu (Actual color is black), the font color of the dropdown menu and hover color of this fonts (Actual color white and gray).

The url is www.ananay.cl/DEMO

thanks

To do that you need to use override.css file...
Please edit: /templates/gk_ananay2013/css/override.css and add at its end:

Code: Select all

.gkMenu > ul li div.childcontent,
.gkMenu > ul li div.childcontent-inner,
.gkMenu .haschild:hover > a{
background: #500;
}


This will change background color.
Remember to enable "CSS override" in template settings - advanced section.

To change subenu item color use this code:

Code: Select all

.gkMenu > ul li div.childcontent a {
color: #00f;   
}


To change submenu item hover color, use this code:

Code: Select all

.gkMenu > ul li div.childcontent li:hover > a,
.gkMenu > ul li div.childcontent li:hover > a small {
color: #0f0;   
}


To change main menu item hover color, use this code:

Code: Select all


.gkMenu .haschild:hover > a,
.gkMenu li.haschild.active:hover > a {
   color: #fff;
}


To change default popup background color, and default font color, use this code:

Code: Select all

#gkPopupOverlay, #gkPopupLogin, #gkPopupCart {
color: #fff;
background: #555;
}


Thank you it worked perfectly!
I have another question, how can i set borders to the whole drop down menu? when i set borders to it it becomes a mess (you can see it at the url), i need the borders only at the sides of the drop down menu.

Thanks!

Could you create a fast screen shot and mark those borders on it?

borders.jpg

Hello,

Attached image showing the borders i need in red color as a reference.

Thanks!

Hello,

Attached image showing the borders i need in red color as a reference.

Thanks!

Sorry, image attached now

to be honest - you will not be able to get exactly this look. This is the closest thing I was able to get:

Code: Select all


.gkMenu > ul .haschild:hover > a{
border-style: solid;
border-width: 1px 1px 0 1px;
border-color: #f00;
}
.gkMenu > ul li div.childcontent {
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #f00;
}


You can increase 1px to create different border size.

Hello, im using the following override:

Code: Select all

.gkMenu > ul .haschild:hover > a{
border-style: solid;
border-width: 0 0 0 0;
background:transparent;
color: #56BFDC;
}
.gkMenu > ul li div.childcontent {
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #EFEFEF;
background-color: #F9F9F9;
}
/* Letras Menu */
.gkMenu > ul li div.childcontent a {
color: #929292;   
}
.gkMenu > ul li div.childcontent li:hover > a,
.gkMenu > ul li div.childcontent li:hover > a small {
color: #56BFDC;   
}
.gkMenu .haschild:hover > a,
.gkMenu li.haschild.active:hover > a {
color: #56BFDC;
}

you can see the results in http://www.ananay.cl/DEMO

Now i have 3 issues that are the following:

-I have a black long rectanle at the top of the dopdown menu, i need this to dissapear or match the solor of the grey background of the rest of the dropdown menu.
-I have a black background in the main menu parent item when that item menu is selected and then hovered, i need it to stay transparent.
-Some items at the menu are in white and i need to change that color as they cannot be seen because of the backgound color, where can i change this color?

Attached a image of the actual menu

Thanks

Hello,

now i´ve figured everything out, the only thing left is how to change the color of the top item menu in the dropdown menu, they are in white and i need to change their color, in the attached image i´ve circled in red where the items are (they are hardly seen because they are white).
the url is http://www.ananay.cl/DEMO

Thanks

the ones in white are the child items of "Tienda", the 3rd level child items are the ones in gray

Code: Select all

.gkMenu > ul li div.childcontent header a {
color: #f00;
}


Thank you! everything is solved now, regards!

Ok, closing the topic.