1

Topic: override the tinymce button image

Hi all,

I am trying to override the default button images for subscript and superscript buttons. i tried to search for this in tinymce but i was unable to find. I just i want to override the button images but the not the functionality of buttons. I need the default functionality provided by tinymce for subscript and superscript.But i just want to see the different image for these two buttons on toolbar. Any help is really appreciated.Is there any configuration? or any image location where i can change the image url to a different image which i want?

2

Re: override the tinymce button image

rparupelly wrote:

Hi all,

I am trying to override the default button images for subscript and superscript buttons.

I don't think that's documented anywhere, but here's how you can do it (for the default skin):

.defaultSkin span.mce_sub {
    background:url(./path/to/subscript.gif);
    background-position:0px 0px; 
}
.defaultSkin span.mce_sup {
    background:url(./path/to/superscript.gif);
    background-position:0px 0px; 
}

Both those icons are of course 20 x 20 pixel images.

Put that code into the "tiny_mce/themes/advanced/skins/default" directory in a file named "ui_custom.css".

In your editor config, add this line:

    'skin_variant' : 'custom',

Now if you are using a different theme, simply replace ".defaultSkin" in the CSS file with the correct name. For example:

The Default skin = ".defaultSkin"
The Office 2007 skin (o2k7) = ".o2k7Skin"
etc....

Notice that the correct name is "skin name" + "Skin".

Hope this helps......

"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

3

Re: override the tinymce button image

Krupski wrote:

I don't think that's documented anywhere, but here's how you can do it...

@Spocke:

How about config options to do this EASIER?

Maybe something like:

    theme_advanced_custom_icon_bold : './icons/bold.gif',
    theme_advanced_custom_icon_italic : './icons/italic.gif',
    theme_advanced_custom_icon_underline : './icons/underline.gif',
    // .....etc......

where the option is "theme_advanced_custom_icon_" + "button name"?

Of course, user defined buttons don't need to be parsed since their icons are defined along with the user button itself (but if they were all parsed I guess it wouldn't hurt anything).

What do you think?

"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

4

Re: override the tinymce button image

I really appreciate your response. thanks. I will give a shot.