Shape 5

content editor toolbars will typically either implement their own css for the WYSIWYG display, or import the main css file from the template, so that it better represents what you would see on the front of the site. for example, JCE uses css/template.css by default. you can override that and create your own, but that means recreating a substantial amount of css.

the problem I have with Shape5 templates is that so much of the css is broken out into separate files, the template.css file used by the editor barely does anything. I understand why that's done (breaking out into separate files), and for the most part agree with the development principle. but in this case, it's not very helpful.

I was thinking that at the very least, it would be great if custom.css were included with template.css so that any custom mods could be included in the editor css. JCE lets you wrap the editor in a class that you define through the interface, so that you can isolate editor styles more easily. it would be great if custom.css was handled through @import in the template.css file, so that it was reliable included with that css file rather than imported separately in the document head. custom.css is empty by default, and I'm pretty sure it's always loaded along with template.css, so all you would be doing is shifting where/how it's loaded.

Hello,

Thank you for the suggestion, it is something we will consider. custom.css is technically for adding any additional css, but it's not necessarily geared towards items as an extension to editor.css to be used in the editor. Most of the time it's used as modification to the core template itself, ie: changing a button, size, margin or padding of an area, not typography items that are handled by editor.css

"it would be great if custom.css was handled through @import in the template.css file"

---The problem with that is the custom.css file has to be the very last file loaded. Custom.css is almost always used as an override file, ie: overrding default css calls in the template.css, editor.css, etc. Because it's called afterwards it overrides it. By including it in template.css you lose the ability to override editor.css, responsive css file, multibox css, and several others, which is needed.

As an alternative you could always create your own css file and include it in template.css or editor.css:

@import url(my_custom.css);

yes, I understand that custom.css should load last, and agree that could be problematic.

what I ended up doing is creating a custom css file for JCE, and then imported all the required template css files. so it basically serves as a single css file combining all the relevant template css files.

I was just looking for an effective way to do this using JCE's default config.

Hello,

Good feedback, thanks.

One possibility might be to eliminate the calls for editor.css and custom.css altogether from the source. Then load template.css at the bottom (where custom.css is currently loaded). And at the bottom of template.css call the imports for editor.css and custom.css. Everything should be in the same order that way.

I am not entirely sure if that works though, because editors look for editor.css not template.css by default. So we're back to the same problem of it not loading in the editor because it can't find editor.css.