TinyMCE: How to add wider toolbar icons

By default, TinyMCE only accepts icons that are 20px by 20px in the toolbar. If you want to make a customized toolbar icon that is wider than 20 pixels, you will need to edit the ui.css in TinyMCE. I find this useful for adding custom TinyMCE plugins/etc.

Edit the ui.css (tiny_mce/themes/advanced/skins/default/ui.css) and change the following values:
Replace the “width:20px; height:20px;” with “min-width:20px; height:20px;”. The min-width value will allow for wider icons to be added as well as setting the default width to 20px if one isn’t specified. This will prevent existing icons from breaking.

There should be 2 sections in the css file that needs to be changed.

.defaultSkin .mceButton {display:block; border:1px solid #F0F0EE; min-width:20px; width: 20px; height:20px; margin-right:1px}

.defaultSkin span.mceIcon, .defaultSkin img.mceIcon {display:block; min-width:20px; height:20px}

You can now customize the width of your icon inside ui.css.

.defaultSkin a.NAME-OF-YOUR-ICON {
width: 60px;
background: url(YOUR-ICON-LOCATION);
}

Update 5/4/2011: Fixed problem with Internet Explorer 8 with Compatibility mode enabled. This is caused by Internet Explorer 7 not supporting the min-width CSS feature. The fix is to add in a placeholder width value (20px) in addition to the min-width.