I’ve been complaining a bit in the Moodle Tracker about the current implementation of “Custom Menus” that we’ve recently included in Moodle 2.0. This new feature allows users to easily input links and text to be displayed as a dropdown menu by themes that support the feature.
My first attempt to add a custom menu to a theme ended in frustration that Moodle 2 is loading the YUI3 default skin CSS in addition to the core CSS to make the menu function. What this means is that theme developers have to overwrite the skin CSS to change the look of the menu.
For example, the YUI3 skin applies a border around the entire menu. If I don’t want a border around a menu for a particular theme, I have to add a specific declaration to remove it. This is one of things that the new Moodle 2 theme engine was supposed to prevent. It’s tedious and, as I’ll point out below, buggy.
Unfortunately, there isn’t an easy fix to this problem, which is fine with me for the time being as long as I can still change the appearance of the menu to fit my themes.
Here’s a problem I’ve now encountered that I can’t seem to resolve on my own:
What you’re seeing is a new theme I’ve created for the core (called Fusion) that pulls the custom menu into the top of the header. You’ll notice the slight shift upward and to the left of the menu every time the theme loads. This is happening (I believe) because the YUI3 CSS is loading first (as it should), then my menu CSS is loading. YUI3 tells the browser to pad the menu. Fusion tells it not to.
At first, I thought this was the result of my having “Theme Developer Mode” turned on to disable the cache, but unfortunately, I’m still seeing this issue with “Theme Developer Mode” disabled.
As much as I’d like to see these skin styles removed from the menu, I realize that the Moodle 2 release has bigger problems that we need to focus on. Still, I need a solution to this problem. It doesn’t have to be perfect, it just has to work. Any ideas?