Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Easy : ) Provide your icon (30x30px) with your contrib module and make sure there is CSS loaded in the admin section to target the menu item. The admin module adds a path-based class to all the items where icons can be displayed, so you can target your item using the path for your contrib module's main menu callback:
/* path-admin-foo-bar corresponds to menu items with the path admin/foo/bar */
.path-admin-foo-bar span.icon {
background: transparent url(my-icon.png) no-repeat;
}
Is this how icons will always be handled or is there room for other options.
possibly an icon.png file in the module directory with the .info file, or maybe specify icon/s in the .info file.
maybe a combo of these ideas? suggestions? comments?
I suppose this could be taken as how should "Drupal" handle module icons.. not just Admin/Slate.
I tired this solution and it did not work, because the css for the admin module is always being loaded last so it always overwrote the css for my modules icon.
This is what I did for my module, In my 'modulename.module' I wrote the function:
function modulename_init() {
if (arg(0) == 'admin'){
drupal_add_css(drupal_get_path('module','modulename').'/modulename.css','module','screen');
}
}
and for the css 'modulename.css'
/* path-admin-foo-bar corresponds to menu items with the path admin/foo/bar */
.path-admin-content-modulename span.icon {
background: transparent url('modulename_icon.png') no-repeat;
}
using firebug it shows that mymodule.css was loaded, as well as the icon, but then the admin module css is loaded last (overwriting my css rule) and displays the default icon.
if you KNOW exactly what css rule you're trying to override (ie, the css rule of the admin module), then you can use specificity in your module's css to override that one.
Comments
Comment #1
yhahn CreditAttribution: yhahn commentedEasy : ) Provide your icon (30x30px) with your contrib module and make sure there is CSS loaded in the admin section to target the menu item. The admin module adds a path-based class to all the items where icons can be displayed, so you can target your item using the path for your contrib module's main menu callback:
Comment #2
Jackinloadup CreditAttribution: Jackinloadup commentedIs this how icons will always be handled or is there room for other options.
possibly an icon.png file in the module directory with the .info file, or maybe specify icon/s in the .info file.
maybe a combo of these ideas? suggestions? comments?
I suppose this could be taken as how should "Drupal" handle module icons.. not just Admin/Slate.
Comment #3
mikemiles86I tired this solution and it did not work, because the css for the admin module is always being loaded last so it always overwrote the css for my modules icon.
This is what I did for my module, In my 'modulename.module' I wrote the function:
and for the css 'modulename.css'
using firebug it shows that mymodule.css was loaded, as well as the icon, but then the admin module css is loaded last (overwriting my css rule) and displays the default icon.
Is there a better way to accomplish this?
Comment #4
jwilson3need to use css to its full potential and "override" any subsequent rules that may come after yours... there are many ways to do this:
1) Add
!important
... it usually gets the job done, but might not.OR 2) add specificity...
if you KNOW exactly what css rule you're trying to override (ie, the css rule of the admin module), then you can use specificity in your module's css to override that one.
Note I haven't actually tried this, just offering a suggestion on how to get it to work, based on my knowledge of css.
Comment #5
mikemiles86suggestion 1 did not work, but suggestion 2 did.
Thanks.