buttons wider than 16 pixels ?

I could be wildly off base on this and there may very well be a better, more inline with the API, method of doing this. But here is how I determined that it works:

I was digging around the html in FireBug and came across this html:

<a onclick="CKEDITOR.tools.callFunction(14, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(10, event);" onkeydown="return CKEDITOR.ui.button._.keydown(10, event);" onblur="this.style.cssText = this.style.cssText;" hidefocus="true" tabindex="-1" title="Source" href="javascript:void('Source')" class="cke_off cke_button_source" id="cke_14">
<span class="cke_icon"/>
<span class="cke_label">Source</span>
</a>

If you notice, there is a span in there with a class of cke_label containing the text that is the title of the plugin. From there I delved into the CSS and located this snippet:

.cke_skin_kama .cke_button_source .cke_label{display:inline;}

This affects the label of the source button when using the kama skin. So, for example, say you want the Template text to show for that button. Just add the following into the ckeditor/skins/kama/editor.css file:

.cke_skin_kama .cke_button_templates .cke_label{display:inline;}

To be nice and clean, you should probably do a Find for cke_button_templates so you can put this line right after the entry that styles the template's icon.

When I discovered this I was originally trying to find a way to do this for my own little plugin I wrote, but I was unable to find anything in the API, documentation, or anywhere else that lead me to a solution. Hopefully this isn't too hack and slash!

Edit
Upon reviewing my method, I realize that its pretty dumb of me to suggest modifying core files unnecessarily as you can simply put the following straight into your external stylesheet or internal style rules of the page that contains CKEditor.

.cke_skin_kama .cke_button_templates .cke_label{display:inline;}

Sorry about that!

sry for digging out this old thread, but is there a way to do this with a self created button?

I have a button with an icon but the button should look like: [icon:Text] like the Source button

ok found the solution, for everyone who's interested:

just copy the line from above and change it to your button name than insert in ckeditor/skins/kama/editor.css or your own css, the label defined in your plugin.js becomes the text beside the icon



greetz