I'm using the Afterburner theme with Moodle 2.2.1.
For the custom menu, the final level adjusts the height of the menu item to fit all the text. The other menu levels don't do this, they are a fixed height. I'd like every level of the custom menu to have this height adjustment.
I'm comfortable changing the files, just unsure of which line(s) in which file(s) needs updating. Can anyone point me in the right direction?
Hi,
Sorry it's taken me so long to answer this question. All the menu items should word-wrap so I am not sure what you mean by...
"...the final level adjusts the height of the menu item to fit all the text The other menu levels don't do this, they are a fixed height."
I will need to take a better look at this as it's ages since I worked on the Afterburner Menu.
The changes would need to be done in the stylesheet for the menu, so the file that needs changing would be theme/afterburner/style/afterburner_menu.css but which line I haven't a clue until I check it out. Fortunately it uses the same menu as Decaf so the clue will be in that theme which you can see HERE.
I'll take a look and see if I can see what's been happening.
Cheers
Mary
Hi,
I think I have the CSS you need...
I wasn't able to get the code to work in the settings page. But I added it to afterburner_menu.css and it's now adjusting the height. However, the arrow is acting funny now. When I mouse over the menu item, the arrow appears at the bottom of the item and multiplies.
Looks like the CSS is broken. Perhaps you missed off something?
If you gave me a link to your site I could tell you what's casuing it, but it did not do that in my versions.
It's an internal site, so I can't link you.
In the attached file, I updated lines 43 and 44.
Looks like you have added a 2nd background to the same element/s as the arrow.
The 1st background rule uses repeat-x whereas the looks not to be defined so will repeat also.
background: url([[pix:theme|images/light3]]) 0 0px repeat-x;
background-image:url([[pix:theme|menu/nav-arrow-NEW]]);
I know it is possible to uses multiple images in one container using CSS3 notation, but the way you are doing this is wrong.
The first example in this link is the way you should do this.
Cheers
Mary
Adding 'repeat-none' to the arrow background fixed the issue. Thanks!
Last question, I swear!
Text wrapping... If an arrow appears in the menu item, I'd like the text to wrap before the arrow. Right now, if the text fits on one line, it's on one line with the arrow on top of the text.
You need to change this padding so that it adds 20px to the right side of that menu item.
ul.dropdown span,
ul.dropdown span a,
ul.dropdown li.clickable-with-children > a {
background: url([[pix:theme|images/light3]]) 0 -68px repeat-x;
width: auto;
padding: 2px 2px 20px 2px;
color: #FFFFFF;
}
There is no such property as repeat-none.
| Value | Description | |
|---|---|---|
| repeat | The background image will be repeated both vertically and horizontally. This is default | |
| repeat-x | The background image will be repeated only horizontally | |
| repeat-y | The background image will be repeated only vertically | |
| no-repeat | The background-image will not be repeated | |
| inherit | Specifies that the setting of the background-repeat property should be inherited from the parent element |