How to change hightlight color of a menu and submenu item

How to change hightlight color of a menu and submenu item

by Muhammad Omer Saleem -
Number of replies: 8

Dear All,

 

I  am using moodle v2.0.3+. I am using a standard theme. I created a custom menu using theme setting in Appearance. Menu also contains submenu items. When I get mouse on any menu item it shows/highlight that item with blue color. Same the case with drop down (submenu) items. I am using core.css file to change custom menu style but not seccedded yet. I want to change hightlight colors of these items.

I searched alot, used firebug to figure it out and read moodle docs even tried many other things to solve this issue but no avail. 

Please help me out that how can I change highlight colors of these items. Any help would be greatly appreciated. Pictures are pasted below.

    

Thanks in advance,

Omer

Average of ratings: -
In reply to Muhammad Omer Saleem

Re: How to change hightlight color of a menu and submenu item

by Danny Wahl -

Here you go:

https://github.com/thedannywahl/Melbourne_4_Moodle_2/blob/master/style/custommenu.css

look for the sections labeled /* Top menu */ and /* Sub menu items */

just find the background and background-color declarations respectively. you can see a demo here:

http://moodle.iyware.com/?theme=melbourne

Average of ratings: -
In reply to Danny Wahl

Re: How to change hightlight color of a menu and submenu item

by Muhammad Omer Saleem -

Hi Daniel,

Thanks for your great help. I did as you mentioned above. Top menu Items(PRINCE2 eLearning and PRINCE2 Help) with sub menus (drop downs - PRINCE2 F, PRINCE2 P, PRINCE2 F+P, PRINCE2 Q) are properly changing by copying your code as you can see on image below.

but the top menu item (Home & Training and development) without submenus(drop downs) are still the same with the blue color as I mentioned in my previous post. I also want to get rid of that blue color and want to add a color as per my requirement. you can see that blue color in the image below.

I have copy/pasted all of your code in a css file mentioned in the following link

https://github.com/thedannywahl/Melbourne_4_Moodle_2/blob/master/style/custommenu.css

Last 2 menu items are changing, first 2 items are still the same.

Please be kind to help me out completely, I'll greatly thankful to you.

Omer

Average of ratings: -
In reply to Muhammad Omer Saleem

Re: How to change hightlight color of a menu and submenu item

by Mary Evans -

Try the attached stylesheet, which is taken from a new theme I am developiing, so you may want to change the colors, but it does style those areas you are finding hard to style. It uses all the CSS from Base theme, so you may like to look at that code to learn more. smile

Cheers

Mary

Average of ratings: -
In reply to Muhammad Omer Saleem

Re: How to change hightlight color of a menu and submenu item

by Danny Wahl -

that's interesting, what version of Moodle are you using?  as you can see at the demo site I linked to above - the top items without a sub-menu change also, the css class should be .yui3-menuitem-active

Average of ratings: -
In reply to Danny Wahl

Re: How to change hightlight color of a menu and submenu item

by Mary Evans -

Moodle 2.2.1

#custommenu .yui3-menuitem-active is in that css file isn't it?

I'm not sure what you are getting at?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: How to change hightlight color of a menu and submenu item

by Danny Wahl -

I'm saying it's strange that that css works on my site but not on theirs.  But I'm on 2.3 dev and there have been some changes to YUI and base recently that may explain why if they're using 2.2 stable

Average of ratings: -
In reply to Mary Evans

Re: How to change hightlight color of a menu and submenu item

by Muhammad Omer Saleem -

Hello,

Thanks for you help. Problem resolved but now there is another problem that menu is working properly on google chrome and firefox but not properly working/showing on any version of internet explorer(ie7, ie8, ie9, ie10). 

You can view the main menu at the following website: vle.cipfa.org.uk.

I think there is some image, color or else which is overriding the original menu causes non-poressional behavior of the menu.

Please be kind to guide me as its a last question/problem regarding my main menu/custom menu.

Thanks a lot,

Omer

Average of ratings: -
In reply to Muhammad Omer Saleem

Re: How to change hightlight color of a menu and submenu item

by Mary Evans -

It works great in IE9 no problem at all. IE7/IE8 do not use CSS3 so the corners are not rounded...but other than that, it looks OK.

CIPFA

Average of ratings: -