How to change the Drop down menu colors in Marinelli theme version 7? [#1299114]

Hello,
I would like to change the drop down menu colors of the Marinelli theme version 7. This question has been adressed for the theme version 6 (http://drupal.org/node/425920) but not for the version 7.
Please do you know which CSS files I need to modify? Which changes I need to do? I try to modify primary-links.css without effect.

Thank you for your help.

Regards.

Vincent.

Comments

Comment #1

fathzer commented 24 November 2011 at 22:15

Hi,
I spent a lot of time trying to do that ... without success.
I have a very partial result on Chrome or Firefox by changing the backgrounds of the following in css3/css3_graphics.css
.cssgradients #navigation-primary h2 > a,
.cssgradients #navigation-primary > ul > li > a
.cssgradients #navigation-primary > ul > li > a.active,
.cssgradients #navigation-primary > ul > li > h2 > a.active
.cssgradients #navigation-primary > ul > li > a:hover,
.cssgradients #navigation-primary > ul > li > h2 > a:hover,
.cssgradients #navigation-primary > ul > li:hover > a,
.cssgradients #navigation-primary > ul > li:hover > h2 > a

I've found no way to change menus under IE8, nor the orange line on the top of the sub-menus :-(

I hope somebody could help us.

Jean-Marc

Comment #2

the64u commented 25 November 2011 at 05:07

Yes it is resolved.

Edit the css3_graphics.css file for the color you want...

code snippet is

.cssgradients #navigation-primary h2 > a,
.cssgradients #navigation-primary > ul > li > a
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #D66E2F),color-stop(0.4, #C54F08));
background: -moz-linear-gradient(top center,#7ab0d4,#156aa3 40%);
}

Comment #3

owayslate commented 30 November 2011 at 00:10

Could you answer this question in English??

Comment #4

CreativeJS commented 15 February 2012 at 17:24

Go to site/themes/marinelli/css/css3/css3_graphics.css

Under the "Primary Links" section, change ALL the background colors that are the original blue code to the dark and light colors to make the gradient you want.

Ex:
.cssgradients #navigation-primary h2 > a,
.cssgradients #navigation-primary > ul > li > a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #7ab0d4),color-stop(0.4, #242b7b));
background: -moz-linear-gradient(top center,#7ab0d4,#242b7b 40%);

In my theme, I wanted a dark blue and red theme. So for this set of colors, I changed them to the blues I wanted for my gradient. The first hex code is usually the lighter color, and the second code is the darker.

To change the orange hover active color to the colors you want, use the same method.

Ex: I changed my hover/active color to a red gradient:
.cssgradients #navigation-primary > ul > li > a:hover,
.cssgradients #navigation-primary > ul > li > h2 > a:hover,
.cssgradients #navigation-primary > ul > li:hover > a,
.cssgradients #navigation-primary > ul > li:hover > h2 > a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fc6767),color-stop(0.4, #c01d2e));
background: -moz-linear-gradient(top center,#fc6767,#c01d2e 40%); /*edited to red*/

The best way I figured out which color was which was to copy the original hex codes into either Google or Photoshop. This then allowed me to see which colors were which on the rest of the css code and so I could change all of them accordingly.

-Jess