[Resolved] Styling of WYSIWYG buttons in CRED post editor form

[Author]

Posts

[Alan]

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

[Nigel]

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.

[Alan]

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.

[Frank]

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