Rich-editor style - legacyFrame?

Kaspar

I changed colors of the editor, black field - white text

several users still see the field as white aswell as the text being white.

So I have pulled my hair and the rest left is turning grey, trying to figure it out.

I found something

.richEditor-legacyFrame_fean71o

.richEditor-legacyFrame_fean71o {
    background-color: rgb(255,255,255);
    height: initial;
    margin: auto;
    min-height: 242px;
    padding: 0;
    position: relative;
}

It is a very thin line on the edge between the editor field and the page around it

You probably need to zoom on the picture - it is right on the edge of the lightblue covering the editor field

Appearently when active the legacyframe color overrules the .richEditor-frame color

In what cases are the legacyframe active?

charrondev

Always. It's part of our upcoming new theming system that rich editor was mostly refactored into.

The source line is here.

It should be applied every single time the page renders. On this page for example:

The variable driven theme system that drives these generated classes is not overridable on the forum yet. In the mean time don't style against that class. and of the classes with some asdfasf garbly gook at the end are generated and can change between page renders, and definitely between updates. Use one of the classes for styling it.

Kaspar

Thank you.

There is something I missed/do not understand or simply don't know here:

If I remove the garble gook it does not work.

You say dont style against that style (that specific one I take)

But then you say "Use one of the classes"

I already ended up styling against

.inputbox, .richEditor-frame, .richEditor-frame.InputBox

as users kept saying it was still white.

(I cleared /cache everytime and asked users to do a Ctrl+F5 reload of page in their browser - still white for some)

Now only legacyframe is missing - from your source code.

"variable driven theme system that drives these generated classes is not overridable on the forum yet. "

But later comes "Use one of the classes for styling it." which I understand as I can style it.

sorry, I am a bit baffled.

Help? :-)

Is it possible, as of now, to style it or not?

If yes - how should I do it?

Thanks in advance.

Shadowdare

Sounds like you're looking to do something like this:

.richEditor .richEditor-frame {
    border: none;
    background-color: #000 !important;
}

Basically, the suffix for the ".richEditor-legacyFrame_" class can change, so it's better to select another more static class the element has such as ".richEditor-frame". If you see that your changes are being overridden due to the element's order of classes in your browser's developer tools, you can add "!important" at the end of a CSS declaration, but only add this when necessary.

Kaspar

Thank you.

I was trying to avoid !important

.richEditor-frame is first I used, then added more

I forgot to come back to this and post that I figure out the cause.

It was a caching issue.

ehm 😔 I forgot to change version for theme :-(