• As powerful as possible, as complex as necessary.
  • Posts: 14,278
Adding menu icons
« on October 27th, 2011, 12:42 AM »
Hmm, I just tried to do this today, and while I applaud the elegance of the given setup, it's a pain for plugins to have to do, not to mention inefficient.

To put it into perspective, right now when I add the menu icon, I have to add the following line of code as well to add the class, because there's no easier way of doing it, not even a prototype. While it may be efficient to just extend m_home in the CSS, there's actually no way to access that from the menu code, not even a way to specify a custom side-along class (e.g. to specify .m_home and then override the background property)

Code: [Select]
.m_myicon { float: left; width: 16px; height: 16px; padding: 0; background: url("' . $context['plugins_url']['Arantor:myplugin'] . '/myicon.png") no-repeat 0 0; margin:4px 4px 0 2px; }');

I can't help but think we can do this better by crafting a general icon class and adding the specific item to it as well which means the new menu icon styling only has to override background for that icon.

If there's another way of doing it, I'm all ears, but I didn't find one in the menu template and nothing better occurs to me right now...
Posted: October 27th, 2011, 12:33 AM

Also note that this will be more important if themes decide to restyle the menu, because if they restyle it without adjusting the markup, the style might be totally off. At least if the general style is inheritable, the worst that can happen is the icon is the wrong size, rather than being totally broken.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial


  • Dadman with a boy
  • Posts: 16,068
Re: Adding menu icons
« Reply #1, on October 27th, 2011, 08:18 AM »
My first reaction would be to add a index.myplugin.css file to the main index list. That way it's easily done.

The simplest way would be to use a generic class though. Doesn't prevent us from using inheritance on all classes but allows other files to inherit easily with the icon class.