XF 2.1 Editor styling--what controls the Save/Preview/Cancel text and background colors in Edit mode?

Rudy

Well-known member
So I wanted to fix the highlighted text in the editor window--that came out perfectly. But I have an unwanted side effect:

1603658407528.png

I have tried a few different button coloring options in Style Properties but haven't found which one will let me change either the text or background colors of these buttons.

This is in the default XenForo theme, in two of our three color selections available to visitors. (The "dark" version I created displays OK, but it's still a bit low-contrast for my taste.)

If there isn't a style property for this, is this something I can do in CSS/LESS? I wasn't having any luck with it there either, changing a few things and getting nowhere.
 
Solution
In that case you can use something like this in the extra.less template:
CSS:
.button--icon--preview
{
    background-color: orange;
    color: black;
}
That's for the preview button.

Each button has its own class - you can use the browser inspector to check what they are for the other buttons.

Brogan

XenForo moderator
Staff member
Difficult to say without being able to examine the code.

Are those the buttons in the editor toolbar, below the editor window, or the ones at the bottom of the page?
 

Rudy

Well-known member
Bottom of the editor window: "Save" and "Cancel."

1603745023940.png

In comparison, our Quick Reply buttons:

1603745044872.png

And elsewhere (call to action):

1603745090135.png

The only changes to this theme were colors.

Seems the editor buttons do not inherit the theme's color properties.
 

Brogan

XenForo moderator
Staff member
In that case you can use something like this in the extra.less template:
CSS:
.button--icon--preview
{
    background-color: orange;
    color: black;
}
That's for the preview button.

Each button has its own class - you can use the browser inspector to check what they are for the other buttons.
 
Solution

Rudy

Well-known member
In that case you can use something like this in the extra.less template:
CSS:
.button--icon--preview
{
    background-color: orange;
    color: black;
}
That's for the preview button.

Each button has its own class - you can use the browser inspector to check what they are for the other buttons.

OK, I can fly with that. Thanks!

Additional information. I found that this is changing the text color, which I had to enact to get rid of colored text in posts*:

CSS:
.block--messages .message span, .block--messages .block-row span {color: #1e1e1e;}

I clear that, and the button text returns to normal. Oops. I may need to adjust that, since it's affecting something unintentionally. (The #1e1e1e is the default text color for whichever theme, in other words, @xf-textColor.)

(* We had members manually choosing black text in light themes, and white text in dark themes, making them unreadable when that white text was on a light theme, or that black text on a dark theme. Plus, complaints from some users...like myself. To me, red text on a dark background is blurry! Getting old sucks. 😁)
 
Top