XF 2.3 "Preview" button text/background color

[Growlithe]

Hi folks! How would one go about changing the color of the "Preview" button in the rich text editor? I've tried messing with the options in the "Rich text editor" style property but can't seem to locate it. Thank you in advance!

 

[Brad P]

Hi folks! How would one go about changing the color of the "Preview" button in the rich text editor? I've tried messing with the options in the "Rich text editor" style property but can't seem to locate it. Thank you in advance!

Go to: ACP → Appearance → Templates → extra.less
Add this:

button.js-editorPreview {

    background-color: #ff0000; /* change to your colour */

    color: #ffffff;

}

Better (uses XenForo style variables)
If you don’t want to hardcode colours and want it to follow your theme:

button.js-editorPreview {

    background-color: @xf-buttonPrimary--background-color;

    color: @xf-buttonPrimary--color;

}

If it doesn’t apply
Some styles/themes override buttons more aggressively. Use:

button.js-editorPreview.button {

    background-color: @xf-buttonPrimary--background-color !important;

    color: @xf-buttonPrimary--color !important;

}