CODEWITHSUNDEEP
cssmagentonavigationadminadminhtml
AppDev
AppDev

Reputation: 2907

Magento - Custom CSS in Admin Navigation

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 :)

Upvotes: 1

Views: 1098

Answers (2)

kalenjordan
kalenjordan

Reputation: 2446

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;
}

Upvotes: 0

benmarks
benmarks

Reputation: 23205

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 :-)

Upvotes: 1

Related Questions