• PHP
  • Ruby on Rails
  • MySQL
  • Linux
    • SELINUX
    • Fedora
    • debian
  • Apache
  • nginx
  • AJAX
Albertech.net

TinyMCE: How to add wider toolbar icons

April 1, 2011 6:13 am / Albertech.net

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.

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: CMS / Tagged: tinymce, wider icons

One Thought on “TinyMCE: How to add wider toolbar icons”

  1. Pingback: Custom width icons in TinyMCE | Albertech.net

Post Navigation

← Previous Post
Next Post →

Categories

  • AJAX
  • Android
  • Apache
  • Canon Cameras
  • Cloud
  • CMS
  • Computer Mods
  • Conferences
  • Deals
  • debian
  • Fedora
  • Flash
  • Frameworks
  • git
  • Hardware
  • HTML
  • IDE
  • iPhone
  • iPhone App Review
  • jQuery
  • Linux
  • Mac OS X
  • MySQL
  • nginx
  • PHP
  • portfolio
  • Puppet
  • Ruby on Rails
  • Script Reviews
  • SELINUX
  • Software
  • Software Review
  • SQL Server
  • statistics
  • Tech
  • Tomcat
  • Uncategorized
  • VMWARE
  • VPS
  • Windows
  • wordpress
  • Zend Framework

Blogroll

  • DragonAl Flickr
  • Dropbox – Free 2GB Account
  • James' Blog
  • Javascript Compressor
  • PHP Builder Community
  • PHP-Princess.net
  • Rubular – Regular Expression Validator
  • The Scale-Out Blog
  • Tiny MCE

Tags

activation AJAX android antec Apache AWS awstats canon coda codeigniter debian enclosure external free G1 install vmware tools Internet Explorer iphone 5 jquery Linux mx-1 MySQL office 2007 OSX photoshop PHP plugin plugins portfolio redesigned website review rewrite script security SELinux ssh tinymce tutorial upgrade VMWARE vmware server wordpress wordpress mu XSS zend framework
© Copyright 2013 Albertech.net
Infinity Theme by DesignCoral / WordPress
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.