Multiple jquery.sceditor.css ?

[barry1947]

Good Morning Team,
Is it possible to have a different version of jquery.sceditor.css for a different theme so that the default colours can be changed.
Many thanks.
Barry.

[Kindred]

I believe that you can have one custom css for the editor

[Steve]

https://custom.simplemachines.org/index.php?mod=4231

[Arantor]

I believe that you can have one custom css for the editor

No, by default it's hardcoded to point to the default theme, as I found when I had to edit this not so long ago to get a dark mode editor going.

[shawnb61]

This has been discussed a few times.  It's a little confusing, but yes you can update it pretty much however you want.

- 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). 

Further discussion here:
https://github.com/SimpleMachines/SMF/issues/8135

[barry1947]

Hi There Kindred, Steve , Arantor and shawnb61.
Thank you all for your input.

Kindred I assume that your reply means that there is one option for a css file and that is already taken by SMF's requirement.

Steve I chased yours through and I am not sure if that has implications for the sceditor css files. Looking through the sceditor docs it looks like the css files are loaded at the constructor stage and that is an end to it so nothing would seem to work after the event. If that is wrong please let me know.

Arantor thank you for your reply also. I have exactly the same scenario with a light and a dark theme. Did you find a cure for it?

shawnb61 thank you for your reply also. I did try a very quick test to put a version of the jquery.sceditor.css (currently not looking at WYSIWYG) file into my theme css folder and then checked with the browser inspect function to get the address of the jquery.sceditor.css file and sure enough it still looked at the default theme location. I suppose there could be a cache problem, Do you know of any other way of doing that. I suppose that one way would be to intercept the cseditors constructor and look at where the current theme is located and make a switch if that is not already being done?

Many thanks once again to you all. It is very much appreciated.
Best regards,
Barry.

[shawnb61]

Yes, if you put new css out there, make sure you force a browser cache refresh.  Usually shift-F5, shift-refresh or similar.

The above notes work fine - it's how my themes work (e.g., https://custom.simplemachines.org/index.php?theme=3009).

And yes, dynamically changing the WYSIWYG css can be difficult.  My themes use a .js solution to propagate css vars into the sceditor iframe. 

I believe @Diego Andrés provides a link to an alternate solution in the thread via the GitHub link above.

Or, possibly more user-friendly, you can simply provide a light & a dark theme, and allow the users to easily toggle between them (https://custom.simplemachines.org/index.php?mod=4336).

[shawnb61]

I did try a very quick test to put a version of the jquery.sceditor.css (currently not looking at WYSIWYG) file into my theme css folder and then checked with the browser inspect function to get the address of the jquery.sceditor.css file and sure enough it still looked at the default theme location.

Note the naming difference...  Part of why it's confusing.  Copy it & rename it.

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.

[barry1947]

Hi shawnb61,
Spot on my friend!!!
Thank you. It worked without me needing to change any code.
Have a wonderful day everyone. You have all helped to make my day better once more.
Thanks to all of you.
Best regards,
Barry.