CODEWITHSUNDEEP
javascriptcsstinymce
super
super

Reputation: 2328

How to change the toolbar and button size in tinyMCE

I've created a editor page and i'm trying to increase the size of toolbar and button, This is what I've tried enter image description here

What i want is given below

enter image description here

Is there any way to do this in tinyMCE, Any help gratefully received!

Upvotes: 5

Views: 14920

Answers (2)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93193

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')

Upvotes: 0

Fredy
Fredy

Reputation: 2910

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.

Upvotes: 3

Related Questions