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!
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!
Share Improve this question edited Oct 18, 2012 at 4:35 super asked Oct 18, 2012 at 4:15 supersuper 2,3282 gold badges21 silver badges23 bronze badges2 Answers
Reset to default 3By 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.
JQuery Approach : When you execute the following instruction on console browser,
$('a[role=button]')
You will have 20px So ,you can do the following instructions :
$('a[role=button],img.mceIcon,span.mceIcon').css({'width':'30px','height':'30px'})
$('img.mceIcon,span.mceIcon').css('margin','2px')