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!
That's not the Essential theme, so is the subject of the post wrong?
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
Thanks again Mary!
The code looks great. In feel silly, but where does it go? I tried in the custom CSS box in the essential theme settings.
Do I have to add this in another location in style sheet somewhere?
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
Try purging the cache.
I have purged the cache (site admin>Development>Purge all caches)
Attached is a screenshot of my code (it was a copy and paste)
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
Thanks for spotting that I did try it with just the hover code alone but this is still a thorn in my side and not working
Any advice where to go now?
Thanks very much
Is your Moodle site public?
If it is can you send me a message and give me the web address so I can take a look?
Thanks
Mary
Thanks for the PM and code checking eyes Mary!
Check out this video at 1.10
The colour hover overs are there in the essential theme which is odd
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
Ah, simple life. Cassette in the walk-man and the occasional pager message
The only hover reference I found is in essential>colour (screenshot attached). The red highlighting works on text but not the header menu
V2.8.1.5 will probably fix this. Essential has come a long way since the start and now has less CSS to deal with.
Thanks for the answer and special thanks to Mary!
Right, off to find more technical battles!
Glad to hear you got this fixed!
nooo!
V2.8.1.5 didn't fix it afraid. Any ideas where to go on this one Gareth?
Nope.
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.
The header text colour has its own setting 'headertextcolor' on the 'Header' settings page. Does this theme have too many options?
Just tested alternative colours and hover over works. Can't get hover colours otherwise so I guess this is a bug?
Thanks for spending your time buried in code Gareth. I love the theme!
Screen shot evidence please.
That's currently as intended, so not a 'bug' but a 'feature'.
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
I think it could my own error with the colours. I did play and changed all the colours but I couldn't get it to work before.
Here is a screenshot of my colours page.
If we change it to another colour, the hover works but we don't want to change the colour from white as it impacts the rest of the theme.
Now broken the message menu - ggrrr, this **** theme!
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/
Thanks Lou, please look in the theme Readme file for donation details. That is the Moodle HQ one.
Just an update - found the bug and fix!
If you set theme_essential | themecolor to white, you don't get the hover over
Setting the colour to anything else works!
Have you tried leaving that colour out altogether? Just leave the space for the setting empty?
Leaving it blank defaults to the essential blue colour #30add1
Maybe it's a bugaroonie?
Essentially...yes! LOL
I am gradually sorting out the mess in the M2.9 version.
