How to change the toolbar and button size in tinyMCE

css, javascript, tinymce

Solution

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. Edit the ui.css (tiny_mce/themes/advanced/skins/default/ui.css) and change the following values:

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

Change width and height value as you want.

Problem

I've created a editor page and i'm trying to increase the size of toolbar and button, This is what I've tried What i want is given below Is there any way to do this in tinyMCE, Any help gratefully received!

Original source