(:

Comments

yhahn’s picture

Assigned: Unassigned » yhahn
Status: Active » Closed (fixed)

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;
}
Jackinloadup’s picture

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.

mikemiles86’s picture

Status: Closed (fixed) » Active

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.

Is there a better way to accomplish this?

jwilson3’s picture

need 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.

.path-admin-content-modulename span.icon {
  background: transparent url(icon.png) no-repeat !important;
}

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.

/* override admin_toolbar.css line 254 (ul.menu span.icon, ul.admin-list span.icon, ul.links span.icon) */
ul.menu .path-admin-content-modulename span.icon, 
ul.admin-list .path-admin-content-modulename span.icon,
ul.links .path-admin-content-modulename span.icon {
  background: transparent url(icon.png) no-repeat;
}

Note I haven't actually tried this, just offering a suggestion on how to get it to work, based on my knowledge of css.

mikemiles86’s picture

suggestion 1 did not work, but suggestion 2 did.

Thanks.