Typically, all of the custom CSS in your digital workplace will be in the Appearance area of the Control Panel, either in the CSS override for existing themes, or the Advanced Theme Editor when you've built your own theme. However, for simpler changes focused in a particular area of your digital workplace, you can call sources from CSS files stored in your site. 

Calling external CSS sources opens up several options for your digital workplace. It lets you add CSS from files outside your Igloo, target specific items with simple scripts, and extend the ability to change the look and feel to Space Administrators. It can also be an excellent way of testing out new theme elements without making adjustments to the global theme of your Igloo, and makes branding individual Spaces a snap. 

Sources

In order to call a CSS file, you'll need a file. There's a small sample attached to this article for testing. Add your custom CSS to a file, and upload it to a Folder Channel in your digital workplace. As with all things, Access matters. If members don't have access to the area where the file is stored, they'll be prevented from loading it, and from seeing the results of your work. To call the file, copy the url from the download link where it's stored, and place it in the following code: 

<link href="Your CSS file's download link here" type="text/css" data-theme="custom" rel="stylesheet">

References

With a file created and the tags copied, the CSS can be added to any number of Spaces in your digital workplace using the Layout option from the Space Administration Panel. The Layout menu offers the ability to add a custom header and footer to the Space. The code can be added by accessing the code view in the editor and pasting in the link reference. We recommend adding it to the footer, so it loads after the rest of the CSS in the Space, and ensures a consistent look and feel. 

To call a file and have it affect your entire digital workplace, the same link reference code can be used in the Meta Tags area of the Control Panel, which will load at the top of every page of your site. One of the advantages of loading code this way is that if there's an issue with display, edits and changes can be made to the file, rather than relying on access to the meta tags directly. 

Editing

With the link reference in place, anyone with access to edit the CSS file it calls can make changes to it, letting you open up aspects of theme editing to non-Administrator members. Space Administrators can use a file and the code to make adjustments that are specific to their Spaces, or work with a designer or developer to make those changes. This is especially useful Spaces that need extra branding, whether for acquisitions or new initiatives. 

When making edits, members will need to clear their cache before the changes become visible. The browser will cache the file, and new version won't be treated as a new file. Moving or deleting the file will remove the changes entirely, as will removing the relevant link reference, so all of the changes are easily reversible in the event of an issue. 

Calling CSS files from within your digital workplace empowers your members to make adjustments on their own, while limiting those adjustments to areas that are relevant to them. In addition, they keep your regular theme from being cluttered with a lot of code for specific Spaces. 

If you have other questions about themes, the Igloo platform, workflows, or best practices, you can leave a comment here, or ask a question in the Community area.