As you probably already know, youdon't have to use the Stylesheet field for a Template, or the Stylesheet manager for that matter. I have found that both these methods have their drawbacks but that eventually they will be a fine way to implement CSS.
For the moment, however, if you want to link to external stylesheets and see them applied in the WYSIWYG, do the following. This allows allows you to set your own stylesheet for printing.
Use REL links in your template's head to link to your primary stylesheets for screen and print.
e.g.
Then type the following import code into the Stylesheet field for your Template and the WYSIWYG will pick it up.
@import url("./css/style.css");
Voila!
CSS import trick for WYSIWYG
Re: CSS import trick for WYSIWYG
iNSiPiD, this doesn't seem to work with the latest 0.12 release? Any ideas?
Russ
Russ
-
iNSiPiD
Re: CSS import trick for WYSIWYG
Hi Russ,
No it doesn't. Depends on which WYSIWYG you use as to how to best acieve this now. For FCKEditor, just type in your base color and font requirements for the body tag in the preferences screen.
You can then add your own styles to the WYSIWYG drop-down menu by pasting existing 'classes' from the page/template's applied CSS into the FCK prefs styles tab window. They should now appear. I say should.
Good luck.
No it doesn't. Depends on which WYSIWYG you use as to how to best acieve this now. For FCKEditor, just type in your base color and font requirements for the body tag in the preferences screen.
You can then add your own styles to the WYSIWYG drop-down menu by pasting existing 'classes' from the page/template's applied CSS into the FCK prefs styles tab window. They should now appear. I say should.
Good luck.
Re: CSS import trick for WYSIWYG
Thanks iNSiPiD for the information, but this problem is really quite annoying.
I don't use the CMS template system as I have my own style switcher and have been pretty comfortable with CSS for years now
The system I use gives me all the flexibility I need. I've just added the style swicher example to our CMS test site. Give it a go at:
http://www.cms.shoesforindustry.net/
Now I find I have to use a 'UserCSS' stylesheet and have this included after my normal stylesheet includes and also paste these classes into FCKEditor - when they chould be in my main stylesheets. Of course the decsion then is what should go in the 'UserCSS' sheets and what should go in the normal ones to give at least a reasonable facsimile of WYSIWYG.
Arrgggh! but it can't really be done because the style switcher loads different CSS files for different styles and these would get over written by the user 'UserCSS'. OK so I could put the 'UserCSS' sytlesheet first but that still doesn't work because I rely on inheritance in CSS... Then of course there are my 'handheld' and 'print' stylesheets!
Any ideas... anyone?
Russ
I don't use the CMS template system as I have my own style switcher and have been pretty comfortable with CSS for years now
The system I use gives me all the flexibility I need. I've just added the style swicher example to our CMS test site. Give it a go at:http://www.cms.shoesforindustry.net/
Now I find I have to use a 'UserCSS' stylesheet and have this included after my normal stylesheet includes and also paste these classes into FCKEditor - when they chould be in my main stylesheets. Of course the decsion then is what should go in the 'UserCSS' sheets and what should go in the normal ones to give at least a reasonable facsimile of WYSIWYG.
Arrgggh! but it can't really be done because the style switcher loads different CSS files for different styles and these would get over written by the user 'UserCSS'. OK so I could put the 'UserCSS' sytlesheet first but that still doesn't work because I rely on inheritance in CSS... Then of course there are my 'handheld' and 'print' stylesheets!
Any ideas... anyone?
Russ
-
iNSiPiD
Re: CSS import trick for WYSIWYG
You sound just like another Russ (Weakley) that I know. CSS guru with his own systmes that don't fit into other people's master schemes.
Unfortunately the solution above is your only bet for now. The trick is to ust keep it very simple.
Use FCuK's body tag in prefs to set font and background colour and then just a couple of style definitions that you want end users to have access to. You can create a separate stylesheet for that (as you have) and then just paste them into FCuK.
It's a pain but it's all we've got at the moment. I don't use the CSS manager either because, hitorically, it couldn't handle what I wanted to do. But all this is changing and I understand there's even a style-switcher plugin(?) in the works that users the manager. I could be wrong though.
Unfortunately the solution above is your only bet for now. The trick is to ust keep it very simple.
Use FCuK's body tag in prefs to set font and background colour and then just a couple of style definitions that you want end users to have access to. You can create a separate stylesheet for that (as you have) and then just paste them into FCuK.
It's a pain but it's all we've got at the moment. I don't use the CSS manager either because, hitorically, it couldn't handle what I wanted to do. But all this is changing and I understand there's even a style-switcher plugin(?) in the works that users the manager. I could be wrong though.
Re: CSS import trick for WYSIWYG
Thanks iNSiPiD, but I'm neither Russ Weakley or indeed Ron Weasley I do know a bit or two about CSS however...
Sounds like the new improvements might be cool, so I look forward to seeimg them. I hope it will be able to handle inheritance for zoom style sheets for example and handheld/print stylesheets - where order is important. And also conditional statements for the dreaded IE.
For the moment I will continue the struggle.... and just avoid giving the users much WYSIWYG.
Russ
I do know a bit or two about CSS however...Sounds like the new improvements might be cool, so I look forward to seeimg them. I hope it will be able to handle inheritance for zoom style sheets for example and handheld/print stylesheets - where order is important. And also conditional statements for the dreaded IE.
For the moment I will continue the struggle.... and just avoid giving the users much WYSIWYG.
Russ
-
iNSiPiD
Re: CSS import trick for WYSIWYG
Yeah, the IE hacks are th ebiggest issue at the moment. You don't just want the stylesheet loaded and read for the sake of it so conditional comments become mandatory.
I haven't tried but you may just be able to reference your IE hack stylesheet(s) using the dynamic URL that you see in your rendered page for the CSS.
Still, for the moment, I use conditional statements in my template (and even header block on some pages) and keep all my stylesheets outside the CMS, accessed by @import statements.
I haven't tried but you may just be able to reference your IE hack stylesheet(s) using the dynamic URL that you see in your rendered page for the CSS.
Still, for the moment, I use conditional statements in my template (and even header block on some pages) and keep all my stylesheets outside the CMS, accessed by @import statements.
