Hello,
I just started using Drupal and Danland and have a question regarding menus.
I am trying to customize the color of my drop down menus via my local,css file and I was able to change everything except the color of a selected parent menu and the underlying chile menu. The parent menu always stays dark blue, while the underlying menu always stays light blue as in the unchanged Danland theme.

This is the part of the code which is not working:

#nav .menu li a.is-active {
	background: <hex>;
}
#nav .menu li:first-child a.is-active {
	background: <hex>; 
}

#nav .menu li li:first-child a.is-active {
	background: <hex>;
}

#nav .menu li li a.is-active {
	background: <hex>;
}

If I change a.is-active to a:active, then the color changes only during the duration of the click, however it reverts to the original blue afterwards.

When I do this, I make sure to clear both the cache of Drupal and of my browser.

I read some information that the original color actually uses the images in /themes/images, namely menu-bg.png and bg-bar.png. I went ahead and changed those images, however nothing happens. If, however, I change the image body-bg.png, then the background changes, so that does work. Upon examination I saw that body-bg.png is referenced in the file style.css but menu-bg.png and bg-bar.png are not, which might be the reason. In which file are menu-bg.png and bg-bar.png referenced?

If someone can help me out, I would really appreciate it because the current problem that I am facing makes the theme unusable due to color mismatch. Where is this dark blue and light blue colors for selected menu items hardcoded and how can I change it?

Also, why are there two .css files, namely style.css and responsive.css? What do they each do?

CommentFileSizeAuthor
#3 color-issue-resolved-28735013-3.patch1.59 KBGauravvvv
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jopeto created an issue. See original summary.

jopeto’s picture

jopeto CreditAttribution: jopeto commented

OK, after several hours of experimentint, I managed to get a local.css file, which has separate colors for the following entries:

- unselected top menu entries
- the selected top menu entry
- hovering over top menu entries
- the instance of clicking over the top menu entries
- the drop down menus
- hovering over the drop down menus
- the instance of clicking over the drop down menus

Here is the code, that can be pasted in the local.css file, since it might be useful for beginners.

/*set color of top menu entries that are not currently active*/
#menu {
	background: <hex color>; 
}

/*set color of the top menu entry that is currently active*/
#nav .menu li.active-trail a.is-active, #nav .menu li.active-trail:first-child a.is-active {
	background: <hex color>; 
}

/*set color of the top menu entries upon hovering*/
#nav .menu li a:hover, #nav .menu li:first-child a:hover {
	background: <hex color>; 
}

/*set color of the top menu entries upon clicking to creat a sense of clicking*/
#nav .menu li a:active, #nav .menu li:first-child a:active, #nav .menu li.active-trail a:active, #nav .menu li.active-trail:first-child a:active {
	background: <hex color>; 
}

/*set color of the drop-down menus upon hovering on the top menu entries*/
#nav .menu li li, #nav .menu li.active-trail li {
	background: <hex color>;
}

/*set color of the drop-down menu entries upon hovering*/
#nav .menu li li:first-child a:hover, #nav .menu li li a:hover {
	background: <hex color>;
}


/*set color of the drop-down menu entries upon clicking to creat a sense of clicking*/
#nav .menu li li:first-child a:active, #nav .menu li li a:active, #nav .menu li.active-trail li a:active, #nav .menu li.active-trail li:first-child a:active {
	background: <hex color>;
}

The entire process is not entirely clear to me yet, so if someone can give a good reference for css, that would be appreciated.

Also, if someone knows where the image files for the menu are referenced (a per my previous post), that information would be appreciated.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv commented
FileSize
color-issue-resolved-28735013-3.patch1.59 KB

I have provided a patch please verify it if it is working or not.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv commented
Status: Active » Needs review
Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented

kunalkapoor’s picture

kunalkapoor CreditAttribution: kunalkapoor at OpenSense Labs commented
Status: Needs review » Fixed
kunalkapoor’s picture

kunalkapoor CreditAttribution: kunalkapoor at OpenSense Labs commented
Status: Fixed » Closed (fixed)