You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
- Support
- Forum
- MediaBox
- JCE Editor
- Icons change to text
To make it easier for our users to understand our different icons I would like to replace them with text.
I tried to change the ::before content css with text but that didn't work.
Is there another way to do this?
Please note that I only want these 4 icons replaces with text. The rest are more common then these.
I tried to change the ::before content css with text but that didn't work.
Is there another way to do this?
Please note that I only want these 4 icons replaces with text. The rest are more common then these.
In media/jce/css/ create a file called editor.css and add the following:
This will use the title for each button as the text, and hide the icon.
.mceToolbarRow .mceButton::after,
.mceToolbarRow .mceSplitButton::before {
content: attr(title);
}
.mceToolbarRow .mceButton .mceIcon,
.mceToolbarRow .mceSplitButton .mceText {
display: none;
}
This will use the title for each button as the text, and hide the icon.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Thanks, Thats part of the answer as I don't want every icon to be show as text but only the 4 in the img.
So these are the classes: .mce_iframe, .mce_imgmanager, .mce_filemanager and .mce_mediamanager
Just adding them in those links didn't realy do much
So these are the classes: .mce_iframe, .mce_imgmanager, .mce_filemanager and .mce_mediamanager
Just adding them in those links didn't realy do much
.mceToolbarRow .mce_iframe .mceButton::after,
.mceToolbarRow .mce_imgmanager .mceButton::after,
.mceToolbarRow .mce_filemanager .mceButton::after,
.mceToolbarRow .mce_mediamanager::before {
content: attr(title);
}
.mceToolbarRow .mce_iframe .mceButton .mceIcon,
.mceToolbarRow .mce_imgmanager .mceButton .mceIcon,
.mceToolbarRow .mce_filemanager .mceButton .mceIcon,
.mceToolbarRow .mce_mediamanager .mceText {
display: none;
}
I would suggest doing this:
You can set the label you want to use for each button in the content style for each button, as I have done.
.mceToolbarRow .mce_imgmanager::after {
content: 'Image';
}
.mceToolbarRow .mce_iframe::after {
content: 'Iframe';
}
.mceToolbarRow .mce_filemanager::after {
content: 'File';
}
.mceToolbarRow .mceSplitButton .mceText.mce_mediamanager {
width: auto;
}
.mceToolbarRow .mceSplitButton .mceText.mce_mediamanager::before {
content: 'Media';
}
.mceToolbarRow .mce_imgmanager .mceIcon,
.mceToolbarRow .mce_iframe .mceIcon,
.mceToolbarRow .mce_filemanager .mceIcon,
.mceToolbarRow .mce_mediamanager .mceAction {
display: none;
}
You can set the label you want to use for each button in the content style for each button, as I have done.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!