We'd like a a colour change on hover over in the Custom menu items / custommenuitems menu at the top of the page. Is the only way to do this turn on the theme designer option? We didn't want to slow our site down by turning this option on. I thought there might be some code we could throw in the settings page. See the image attached and how the highlight is grey
Thanks all!
Hi,
What version of Moodle are you using Louis? The theme you have looks like Standard theme. It certainly is NOT the Essential theme.
I am guessing you are using Moodle 2.5 and the Standard theme. You may well have a copy of Essential theme on your Moodle server, but you certainly have not selected it as your default theme.
Ummm...how do we sort this one out?
Is your Moodle site public? Can you give us a link to it?
This way I might be able to help fix the menu.
Cheers
Mary
Hi,
Thanks for the replies! I am using the essential theme but the image was just illustrate my point (I should of just taken a screenshot) I see you all have keen eyes though spotting the theme!
We're running moodle 2.8 with the Essential theme. I'm not able to post a link but I thought there might be something I'm missing in customising the menu hover over
OK...that's easy...here is the CSS that adds it in Bootstrapbase.
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: #00699e;
background-image: linear-gradient(to bottom, #0070a8, #005f8f);
background-repeat: repeat-x;
color: #fff;
text-decoration: none;
}
If you want a solid colour use this:
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: #00699e;
background-image: none;
color: #fff;
}
If you want a gradient background use this:
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: #00699e;
background-image: linear-gradient(to bottom, #0070a8, #005f8f);
background-repeat: repeat-x;
color: #fff;
}
just adjust the HEX colour codes to suit your site colours.
Cheers
Mary
Sorry, I assumed you would have known where to add the CSS. Yes in the Essential CSS section of the General settings page.
If it is not working the either you have copied it wrongly, or it is not picking it up because of some other problem.
Just out of curiosity can you post the exact CSS you are using? Just so I can check it is right. It is so easy to miss off a dot
Cheers
Mary
You have an error in the CSS you used.
the very top line is not connected to the actual code below it which adds the changes you need.
the line that is the odd one out is actually a CSS rule rathre than a class name so delete it. Unless it is a previous rule in which case you need to close it off with curly bracket...
background-repeat: no-repeat;
}
You only need this for the hover colours.
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-color: #00699e;
background-image: linear-gradient(to bottom, #0070a8, #005f8f);
background-repeat: repeat-x;
color: #fff;
}
cheers
Mary
That was the original Essential which I like very much. The one that has evolved looks more or less the same but it is complex as it uses other methods of compiling css and the config.php is way too codified for me...I like the simple life. LOL
Just so that I am not going down the wrong rabbit hole...have you added any more CSS other than the section you posted a screen-shot of?
The CSS I found while looking at your Moodle site points to possibly a setting that has not been activated and so is using default colour, that is why the background is white when hovering.
In the Essential settings there should be some settings where you can select hover colours. Have you set any of these yet? If not then this is perhaps why you don't see any changes in the menu.
Cheers
Mary
If you choose to not use any of the alternative colours, I found there are some colours that seem not to have been altered that stay the default colours. Was that intentional? Looks odd when your new default is largly 'red' and then have to restyle the css to change the default colour turquoise to red using #page-header h1#title { color: #c10f00;}
Some other things don't seem to colour well either like the breadcrumb button which is white on white and has a strange hover color that only colours one half of the background.
I am using version: 2015060200
Has that been super-seeded?
Mary
Not superseded, just updated, latest from: https://moodle.org/plugins/pluginversion.php?id=8802. White on white breadcrumb button was fixed.
But admittedly, I'm still going though cleaning and fixing the CSS. Already spent too much time on it this month.
Hi Lou,
There are some little things related to the Alternative colours which could do with tweaking. However I got the hover working last night and had the three alternative colours switched off, so it is NOT a bug. What it might be is the colours that you have put in the boxes might be causing the problem. Can I ask what you have put for the theme colour in the first box of Essential Colour settings?
Cheers
Mary
Possibly finally sorted in https://github.com/gjb2048/moodle-theme_essential/commit/ab70a8d3969c01186059d3ad4bbfd72edda277a5 - will be in next release being V2.8.1.6.
Care to donate to support continued development please?
Whoop! Great, thanks! Looking forward to test it out
I'd be happy to donate out of my own pocket! Unless there is any other pot, looks like this is the one? https://moodle.org/donations/
