Home → How Do I... →

Creating customized css in style drop down for just one site (in addition to global css)

• Edit

Barbara Seaton

02 Mar, 2015 06:43 PM

We'd like to be able to create some customized classes for a particular site so that the web content editor can have those choices in the drop down, in addition to the choices that are in the global.css file.

I know we can add styles right in the page, but we'd rather add it at site level and I understand we can assign a style sheet just for a single site. Once we do that, then those customized styles are all that shows in the drop down. How do we also pull in the global css styles in addition to the customized styles?

1. 1 Posted by Ryan Griffith on 02 Mar, 2015 06:46 PM

   

   Hi Barbara,

   I believe once you add the custom styles at the Site level, they will overwrite your Global styles. The only way around this would be to copy your Global styles into the Site styles as well.

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by Barbara Seaton on 02 Mar, 2015 07:11 PM

   

   Could you not use @import to pull in another style sheet? Would it need to be a style sheet other than the global.css that gets imported?

   • Edit

3. 3 Posted by Ryan Griffith on 02 Mar, 2015 07:49 PM

   

   Hi Barbara,

   I do not think it will be possible to use an @import in this case, because the asset is within the Global area and it is not possible to link from Site to Global.

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. 4 Posted by Barbara Seaton on 02 Mar, 2015 08:30 PM

   

   Could I create another style sheet that sits in root that could be imported into a site stylesheet?

   I tried it and could not get it to work, so thought I might be missing something.

   • Edit

5. 5 Posted by Ryan Griffith on 02 Mar, 2015 08:49 PM

   

   Hi Barbara,

   Could I create another style sheet that sits in root that could be imported into a site stylesheet?

   I am not sure if I am understanding your question. When you sat root, are you referring to the Base Folder of your Site, a different Site, or the Global area?

   Thanks!

   • Edit

6. 6 Posted by Barbara Seaton on 02 Mar, 2015 09:12 PM

   

   Hey Ryan,

   Sorry for the confusion! When I refer to root, it is the root of our entire web site, where our home page (index.php) sits for ung.edu. So actually, it is a different site in Cascade.

   • Edit

7. 7 Posted by Ryan Griffith on 02 Mar, 2015 09:21 PM

   

   Not a problem at all, Barbara, thank you for clarifying.

   I believe you should be able to accomplish this; assuming you are linking from one Site to another Site. In that case, you should be able to do something like the following:

   @import('[system-asset]site://SITENAME/path/to/styles.css[/system-asset]');
   

   Where SITENAME would be the Site in which the CSS file you wish to import is located, and path/to/styles.css would be the actual path and file name of the CSS file you want to import.

   Please let me know if you have any questions.

   Thanks!

   • Edit

8. 8 Posted by Barbara Seaton on 02 Mar, 2015 09:42 PM

   

   Okay, I created a file in our "_root" site at "_uploads/css/ung/editor.css". I copied the styles from global.css into this file.

   Then I created a file in the actual site, "web-toolbox", at "_uploads/css/edit.css". I added the following statement:
   @import('[system-asset]site://_root/_uploads/css/ung/editor.css[/system-asset]');

   At this moment, it is the first and only line in the file.

   Then I went to Site Management and found the "web-toolbox" site. I edited it and assigned "_uploads/css/edit.css" as the CSS file.

   The result: It shows nothing in the style drop-down when I edit a page in the "web-toolbox" site.

   I noticed in the Site Management that there is a field for CSS Classes. Do we have to fill that in as well? Or can we just assign the css file?

   • Edit

9. 9 Posted by Bradley Wagner on 02 Mar, 2015 10:29 PM

   

   Hi Barbara, yes, you'll need to specify which particular classes are exposed to the editor. Can you give that a shot and see if it works for you?

   • Edit

10. 10 Posted by Barbara Seaton on 02 Mar, 2015 10:34 PM

    

    Hello Bradley,

    Yes, that does work. Unfortunately, it's not what we need. I was hoping for a central css file, with additional local css classes in a specific site. Having to add those classes in that field defeats pulling in a central css file via @import.

    But thanks guys for all your help!

    • Edit

11. 11 Posted by Bradley Wagner on 02 Mar, 2015 10:40 PM

    

    Hi Barbara,

    Would it make sense to scrip the insertion/update of those CSS classes using our web services API?

    We're also re-working our editor controls a bit for our Cascade 8 so that's something for us to keep in mind.

    Can you describe your desired behavior for this CSS and what specifically should show up in the WYSIWYG's style dropdown?

    • Edit

12. 12 Posted by Barbara Seaton on 03 Mar, 2015 01:36 PM

    

    Hey Bradley,

    Sometimes we are asked to develop some specific styling in the content areas of specific sites. We'd like our web editors who maintain those particular sites to be able to use the classes we provided for those styles, but we don't want these classes available globally. If we had a way to provide classes in addition to the global classes in the style drop-down just for a particular site, that would be a great help.

    Here is what we think we're wanting:

    A central css file for the WYSIWYG editor that contains all the styles we want our editors to have access to in the style drop-down. The available classes would be maintained in this one file (just like global.css works now).

    A local css file for a specific site where we can provide customized classes in the style drop-down in the WYSIWYG in addition to the "global" styles.

    So a particular site would have both global and site-specific styles listed in the style drop-down field in the WYSIWYG editor.

    • Edit

13. 13 Posted by Bradley Wagner on 03 Mar, 2015 06:48 PM

    

    Hi Barbara,

    If i'm following you correctly, you could accomplish this but it would be a little cumbersome in terms of specifying the classes.

    You'd have:

    • A system-wide CSS file that is stored in a shared site
    • A site-specific CSS file that imports the system-wide CSS in its first line and then specifies any site-specific styles thereafter
    • The Site's CSS classes would contain all of the global classes plus any classes that are only in the site-specific style.

    Does that make sense? Am I missing anything? Do your local styles ever overwrite your global ones or do they merely supplement them?

    The only real obstacle as I mentioned is that the CSS Classes would need to contain both sets of classes and would need to either be manually maintained or updated via web services.

    Let me know if that makes sense and thanks for helping us understand your desired set-up.

    • Edit

14. 14 Posted by Barbara Seaton on 03 Mar, 2015 08:41 PM

    

    Hey Bradley,

    Yes, you have it correct. The only drawback is listing all the classes in the CSS Classes field. It would be nice to not have to list the classes in that field but would be automated the way the standalone global one is now.

    Having an option in the Site Management panel to choose a combination of css files would be super. Such as: Listed fields only, global only, global and local, or local only.

    Our local styles usually supplement the global ones.

    Thanks!

    • Edit

15. Ryan Griffith closed this discussion on 06 May, 2015 04:08 PM.