Customize color of formatting buttons

#1 · December 12, 2018, 7:07 am

This is a superb forum plug-in and I’m eager to use it. However, I can’t until I resolve this issue…

My formatting buttons in the editor are dark blue and the text is near black, making the choices unreadable. Selecting the buttons changes the text to off-white and then they are easy to identify, while active.

I’m guessing this is theme related, but I don’t want to change the child theme, since it would affect much more than the forum. I’ve looked at the Asgaros css files, but can’t determine what needs to be changed. The Settings/Appearance screen doesn’t seem to allow the button or related text colors to be changed — but I might be overlooking something. I’d like my forum to look pretty much like this one.

Any help is greatly appreciated.

#2 · December 12, 2018, 11:26 am

Hello @mmadison

Yes, those editor-issues are mostly caused by your theme. Can you please give me a link to your forum with activated guest posting-functionality so I can have a look?

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#3 · December 12, 2018, 1:09 pm

Thank you, Asgaros. Poker1.com. Register: http://www.poker1.com/wp-login.php?action=register. Log-in: http://www.poker1.com/wp-login.php Unannounced forum page is /Talk.

If this doesn’t work or you need elevated administration privileges, please email me at the address on file and I’ll privately reply with a temporary admin log-in and password.

I’m guessing that I need to redefine the color or background-color in css, but I don’t know which #af-wrapper .xyz to apply to my WP child theme.

#4 · December 12, 2018, 3:32 pm

Hello @mmadison

Please first reset all appearance-settings you made by deleting all color-inputs and saving the settings.

After it add the following code to the custom-css text-field:

#af-wrapper .wp-editor-wrap button {
    background: none !important;
    box-shadow: none !important;
}

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#5 · December 12, 2018, 4:10 pm

That works perfectly! I also forgot to set the theme color back to default before I had you investigate. Changing it had no effect, but I was experimenting.

Great! Looks perfect. Thank you.

Asgaros has reacted to this post.

#6 · December 12, 2018, 9:33 pm

One other issue remains after applying the custom css you provided, which fixed the main buttons.

Some of the secondary buttons that appear in dialog boxes, such as after clicking “Insert/edit link” and “Insert/edit image” still have the dark blue background with black text. Is there another #af-wrapper that needs custom css?

#7 · December 12, 2018, 10:02 pm

Hello @mmadison

You can fix more of the stylings when you use this code:

#af-wrapper .wp-editor-wrap button, .mce-panel button {
    background: none !important;
    box-shadow: none !important;
}

But in my oppinion this is not an optimal solution. Basically your theme overrides every button and input-element with css-code like this:

button, input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    background-color: #1f78b4 !important;
    border: 0;
    -webkit-box-shadow: 0.35em 0.35em 0.7em #1f78b4 !important;
    -moz-box-shadow: 0.35em 0.35em 0.7em #1f78b4 !important;
    box-shadow: 0.35em 0.35em 0.7em #1f78b4 !important;
    color: #e3f1ff !important;
    cursor: pointer;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 0.7917em 1.5em;
    text-transform: none;
}

This means you have to re-implement the default-rules of all the areas inside the editor which uses buttons and inputs again – which will be hundreds of lines of code. And those css-rules can change in future updates of WordPress.

I highly recommend you to contact the theme-developer so he can try to find a way to implement his theme-stylings without destroying the frontend editor.

cyngrrl has reacted to this post.

If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!

#8 · December 12, 2018, 10:30 pm

Thanks for the advice and especially for investigating this.

I’ll use the custom css you recommended for now and try to fine tune the child them later. It’s really just WordPress twenty-fifteen, using a child theme that tries to fix an issue with another plug-in (storefront) that wasn’t displaying buttons legibly — probably an issue on my end and not the shopping software itself.

Thanks for your help.