I am currently working on attempting to put together a test side to see how our current Moodle will do with migration. I've been trying to create a new theme, but finding that a lot of the themes tend to have white bars at the top and bottom on the menus. Please see the screenshot below as this will showcase it more clearly;
How can I rectify this so these white bars don't appear and it is all the same colour?
Hi,
This is caused by padding or margins...I can't remember which, but if you use Firefox browser and then get the Addon called Firebug you can find out where the styling is coming from, by right clicking the menu item and then select "Inspect Element with Firebug" this brings on a web developer screen at the bottom of your current page, on the right you will see the CSS related to the issue, and on the left the HTML for the page, so looking at both sides you can 'home-in' on the the problem by clicking through the HTML of the menu ul and li.
In the mean time I'll try find a fix for you.
Cherrs
Mary
#custommenu .yui3-menu-content,
#custommenu .yui3-menu .yui3-menu .yui3-menu-content {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #808080;
font-size: 93%;
line-height: 1.5;
padding: 0; /* was originally padding: 3px 0; */
}
That's great, it's done the job nicely. Thank you.
Hi Mitch,
I have since found if you add some extra CSS to the one I posted earlier you get a nicer looking menu...
#custommenu .yui3-menu-content,
#custommenu .yui3-menu .yui3-menu .yui3-menu-content {
padding: 0;
}
.yui3-skin-sam .yui3-menu-label,
.yui3-skin-sam .yui3-menu .yui3-menu .yui3-menu-label,
.yui3-skin-sam .yui3-menuitem-content,
.yui3-skin-sam .yui3-menu .yui3-menu .yui3-menuitem-content {
margin: 0;
padding: 3px 20px;
}
I have just created a Moodle Tracker issue MDL-31483 and intend to fix this in the core themes if I am allowed to.
Cheers
Mary
