Magento - Custom CSS in Admin Navigation

Question

I have a question, and have not managed to find a solution yet. I have a module. For this module, i have an entry in the Admin top nav menu. I would like to customized from this :

enter image description here

to this :

enter image description here

Is there anyone out there who now a solution fro this? Maybe a way to add an css class to the <a> or the <span> thats wrapping the text?

Thanks :)

score 1 · Answer 1 · answered Sep 27 '12 at 14:57

1

There is no distinct node for this, but CDATA can be used.

<menu>
    <your_module translate="title" module="your_module">
        <title><![CDATA[<span class="custom-class">Checklist</span>]]></title>
    </your_module>
</menu>

For specific information, see Mage_Adminhtml_Block_Page_Menu::_buildMenuArray().

But, do you really want to cock up the menu like that? Imagine if every developer did this. It's generally good/polite practice to NOT add top-level nav items, especially with icons. Food for thought :-)

answered Sep 27 '12 at 14:57

benmarks

23,384
1
62
84

Thanks up for the heads up :) The CDATA trick doesn't generate the HTML as HTML ... but as text, so thats a no-go :) Though it was just for the fun of it :) Wanted to know if there was another way than to override the navigation controller, or hardcode it ;) – AppDev Sep 27 '12 at 15:46
@Ben, totally agreed re: not adding top level menu items, although I think ST was an offender (oops!). How would you feel about adding icons to secondary level nav items? For example adding a custom nav item under Promotions with an icon next to it? Dig? I'm battling against the html/cdata right now. – kalenjordan Jul 03 '13 at 06:14

score 0 · Answer 2 · answered Jul 03 '13 at 07:26

It seems like in later versions of Magento, the value of the menu title is escaped, so even using CDATA doesn't work. Some modules that I've seen that successfully add the icon in actually overload the Mage_Adminhtml_Block_Page_Menu class in order to prevent that.

But you can actually drop an icon in with a simple CSS rule by targeting the URL in the nav menu!

ul#nav .level1 a[href*="url_here"] span {
    background-image: url('../images/logo.png');
    background-position: left 4px;
    background-position-x: 5px;
    background-repeat: no-repeat;
    padding-left: 25px;
    background-size: 14px;
}

Magento - Custom CSS in Admin Navigation

2 Answers2