News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Multiple jquery.sceditor.css ?

Started by barry1947, May 18, 2024, 06:48:37 AM

Previous topic - Next topic

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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Steve

DO NOT pm me for support!

Arantor

Quote from: Kindred on May 18, 2024, 07:04:10 AMI 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.

Quote from: shawnb61 on August 05, 2023, 07:26:40 PM- 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
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

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).
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

shawnb61

Quote from: barry1947 on May 18, 2024, 01:52:27 PMI 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.

Quote from: shawnb61 on May 18, 2024, 10:07:22 AMSo 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.

Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

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.

Advertisement: