Drop down links color

Drop down links color

by Emma Richardson -
Number of replies: 3
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I am wanting to change the color of the custom menu links in the dropdown.  (I am using Elegance - Julian's version for now - not sure that that matters as this is a core Moodle feature).  However, I want each of my four links to be in a different color so a basic css change for the menu dropdown will not work. 

I am wondering if there is a way to add a class to the specific link in the Custom Menu Items area under Theme settings?  I know that you can in a regular html link - just not sure how to add it to the Custom Menu area as it uses pipes etc...


Average of ratings: -
In reply to Emma Richardson

Re: Drop down links color

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Emma,

You can try adding a css class to the link like this...

Menu item name|http://someurl.com" class="red|

If the only link in the menu this will create something like this...

<ul>
<li><a href="http://someurl.com" class="red">Menu item name</a></li>
</ul>

So the CSS would be something like...

.red {color: red;}

It should work...

Mary


In reply to Mary Evans

Re: Drop down links color

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Mary - that does add the class correctly.  Will have to keep playing with it though as It is still being overridden by .dropdown-menu>li>a 

If I clear the color from that in Chrome, it shows the correct color but I am concerned about side effects of changing that..

In reply to Emma Richardson

Re: Drop down links color

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I knew it would do something like that so best is to use...

.dropdown-menu > li > a.red {color: #F00;}