Skip Navigation

[Résolu] Styling of WYSIWYG buttons in CRED post editor form

This support ticket is created Il y a 6 années et 3 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 3 réponses, has 3 voix.

Last updated by Frank Il y a 6 années et 3 mois.

Assisted by: Nigel.

Auteur
Publications
#599061
Visual mode (ugly editor button styles).png
text mode (ok styles).png

I have created a basic wiki system for members of a site to be able to edit some common pages.
This uses a CRED form to edit the post body of a custom post type.

The function works perfectly, but the styling of the WYSIWYG buttons is bugging me.
The TEXT (code view) buttons look good, taking their style from the theme.
But in Visual edit mode, the buttons seem to use part of the mce editor style, so they look weird.

The test page I have created is here:
hidden link

(But the content is only available to logged in users. I can provide login details)

thank you.
Alan

#599179

Nigel
Supporter

Languages: Anglais (English ) Espagnol (Español )

Timezone: Europe/London (GMT+00:00)

Hi Alan

Sorry, I don't have anything to offer here.

The WYSIWYG editor inserted by the CRED form is the same tinymce editor inserted by WP in the admin post editor.

I can see that the styles on the Visual tab and the Text tab use different selectors which may account for why your theme overrides the styles of one but not the other, which I suspect is largely a question of luck and may depend on the theme.

I'm afraid I don't see any alternative to identifying the problematic styles on the Visual editor buttons and overriding them with your own styles added in the custom CSS section of your form.

#599376
visual editor fixed.jpg

Hi Nigel,

I did a little research and some experimenting, and found a solution.

I'll document it here in case it's useful for someone else.

The Cred Form to edit the content is contained within its own content template anyway. This can be edited to fix the issue.

Edit the content template >

step 1 is to create a container for the form shortcode

<div class="wikipageform">
  [cred_form form="edit-wikipage-form"]
</div>

step 2 is to add some css to override the tinymce css

my css ended up looking like this:
There are seperate parts for the main icons, the dropdown list, and the little carat icon next to the picklist.

.wikipageform .mce-toolbar .mce-ico {
 background-color: #7b53a1;
    color: #fff;
}

.wikipageform .mce-toolbar .mce-listbox button{
  color: #fff;
}

.wikipageform .mce-panel .mce-btn i.mce-caret {
    border-top: 6px solid #fff;
}

Obviously you can change the colours to match your own theme.

Hope that helps someone out.

#1489671

I used this

/* button background colour */
button:not(.toggle), .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], .bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus, :root .has-accent-background-color, .comment-reply-link { background-color: #eee;}
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.