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 is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#106155 Icons change to text

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Kofide on Tuesday, 22 December 2020 13:31 GMT

Saturday, 19 December 2020 15:03 GMT

Kofide
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.

Attachments

Knipsel.JPG

Saturday, 19 December 2020 19:59 GMT

Ryan
In media/jce/css/ create a file called editor.css and add the following: 

.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.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Saturday, 19 December 2020 20:26 GMT

Kofide
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 

.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;

}

Saturday, 19 December 2020 20:58 GMT

Kofide
Second question to add to that. Trough which form can we edit those titles?
To delete the "insert/edit".

Monday, 21 December 2020 20:48 GMT

Kofide
Sorry for the spam but can I please get an update on this?

Tuesday, 22 December 2020 13:21 GMT

Ryan
I would suggest doing this: 

.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.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 22 December 2020 13:31 GMT

Kofide
That works like a charm. Thanks