jquery.sceditor.theme.css is ignored in sceditor

[McFly]

SMF2.1.4, php8.2, Firefox

I made myself a theme and also created the jquery.sceditor.theme.css for the sceditor. Firefox also loads the jquery.sceditor.theme.css as expected and the editor itself behaves from the design also exactly as it is provided in the css file. However, this is exactly up to the iframe, in which the new content is then entered. From the html-tag on, only the jquery.sceditor.default.css is valid again and the jquery.sceditor.theme.css or others! are completely ignored, even with !important.

Is this because of the editor (in the header inside the iframe only the default is loaded, not the theme), Firefox or php8.2?

[Diego Andrés]

Are you referring to the editor when in source mode?

[McFly]

No, not source mode. Wysiwyg. In source mode the iframe is disabled and replaced by a textarea. In source mode the theme.css is active.

[shawnb61]

Do you have both jquery.sceditor.theme.css & jquery.sceditor.default.css in the theme's css folder?

[McFly]

Only the jquery.sceditor.theme.css.

[McFly]

Well, with the jquery.sceditor.default.css the theme works, but in the end it makes a jquery.sceditor.theme.css obsolete. 

[Diego Andrés]

I use jquery.sceditor.theme.css in my themes and haven't had any issues.

[McFly]

Let's hold on (at least in this case): For the source mode the jquery.sceditor.theme.css is good enough. The wysiwyg mode obviously has to contain the jquery.sceditor.default.css additionally in the theme folder. 

[Diego Andrés]

I don't have the default file.
Are you correctly overwriting the styles you want to change?

[shawnb61]

It's been a while, but I found I needed both. 

The editor itself uses the location where it loads default.css from.  (https://github.com/SimpleMachines/SMF/blob/8a0b81895977fb29a2902aec39d555075764a05d/Sources/Subs-Editor.php#L1912)

I think it depends on how deep your changes are.

[McFly]

So: In Firefox I look for an empty editor input field => right click ==> examine

Now when I click on the iframe I see various ccs files (jquery.sceditor.theme.css, jquery.sceditor.default.css, jquery.sceditor.css, index.css) being used.

But if I click on the html-tag, only the jquery.sceditor.default.css is shown as used.

[Diego Andrés]

But that's what I said before.
For the normal editor it works fine using only jquery.sceditor.theme.css:
You cannot view this attachment.


For source view it doesn't work:
You cannot view this attachment.

This is a known limitation, is logged in here:
https://github.com/SimpleMachines/SMF/issues/7681

[shawnb61]

And as an FYI... the way around that known limitation is to copy the default.css up to your theme's css folder.

I had so many changes I wanted to make to the default.css, it was just as easy to do so.

And now source view basically matches preview mode.  I was trying to get both to match as much as possible.

EDIT...  Note, for me to make it work, to have variables cross the iframe boundary, I wrote some .js that propagated the variables into the iframe...

[shawnb61]

Actually, a few clarifications.  Been a while since I looked into this...  The fog is slowly lifting...

- jquery.sceditor.theme.css covers the appearance of the sceditor area.  From the rows of formatting buttons to the bottom of the textarea.
- jquery.sceditor.default.css covers the textarea ONLY, in WYSIWYG mode ONLY.

So if you want a unique appearance of the editor, e.g., buttons & toolbars, etc., update jquery.sceditor.theme.css in your theme folder.  It may help to start with a copy of jquery.sceditor.css from the default theme.

If you want to control WYSIWYG appearance within the editor textarea, update jquery.sceditor.default.css in your theme folder.  It may help to start with a copy of jquery.sceditor.default.css from the default theme.

The editor is a 3rd party plugin we use.  It accepts ONE custom css file as a parameter, specifically to support dynamic toggling of WYSIWYG mode.

That ONE file limitation for WYSIWYG mode makes certain tasks difficult, e.g., if you are trying to work on a theme with multiple color palette options such as light vs dark mode.  If you need to do that, you need to do some work via code & css vars to work around those limitations (e.g., like I did with my themes). 

Hope this helps.  Clarifications & corrections welcome, the fog may not have lifted fully yet...

[Julius_2000]

I went a slightly different route customizing my editor. I followed the recommendation given to me in another topic on here that suggested using a seperate css file that's loaded from the index.template.php. Therefore, I set up a css file, named it ScEditor_new.css and put in all the necessary selectors I wanted to address in my editor.

I used this approach to replace the standard sprite icons with FA icons, let buttons appear/behave differently on mobile devices (via media query "hover:none") and use it for dark modes I made. So far, I haven't encountered any issues with both source and WYSIWYG mode except for the input field in the latter mode. That's why I defined the selector in my index.css like this (probably could put that in my custom editor css as well):

Code Select Expand

.sceditor-container iframe, .sceditor-container textarea {
    background: #464646 !important;
}
You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.