Forum Support

Shape 5
March 28, 2024, 01:18:58 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: editor toolbar css  (Read 5838 times)
lcdservices
Jr. Member
**
Offline Offline

Posts: 24



« on: September 30, 2015, 06:47:41 AM »

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.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: September 30, 2015, 07:37:02 AM »

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);
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
lcdservices
Jr. Member
**
Offline Offline

Posts: 24



« Reply #2 on: September 30, 2015, 07:44:40 AM »

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.
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: September 30, 2015, 08:06:05 AM »

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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.