When using CSS to customize your digital workplace, we typically recommend applying it in the Appearance area of the Control Panel. This ensures that the code is applied everywhere in your Igloo, and centralizes all of your changes in a single file, making them easy to maintain. However, there are other areas of your digital workplace that support including CSS, and that's the focus today. 

While using the Appearance tab is the best practice, there are a few reasons why these other areas may come into play. They can be accessible to non-Administrator members, or you may only need the code to affect a specific article or page, and nowhere else. Commonly we see these areas used to remove comments or tasks on a specific announcement, or make a change to widgets in a particular Space. 

It's worth cautioning that you should only place CSS in these other areas with a very specific use case in mind, and should document where that code is implemented, in order to maintain it in the future. 

How to

Inserting the code in any of these areas isn't as simple as pasting it in. In order to add CSS, you'll need to provide instructions for browsers to read it as such. In order to do that, you'll need to wrap your CSS in <style> tags, which will let the browser apply it appropriately. In any of these areas, your insert should look like this: 

<style type="text/css">
....CSS goes here...
</style>

If you're adding multiple CSS elements, wrap them all in the same set of style tags for a cleaner and easier to read result. 

The Advanced Tab

Every Page, Space, article and file in your digital workplace has an Advanced tab, which Workplace Administrators can access through the Action Button. The metadata areas in the Advanced tab are only used for public sites or pages, so scroll past them to the Javascript section. In addition to javascript, this area can accept CSS when it's wrapped in the above <style> tags. While normally accessible only to Workplace Administrators, you can grant Groups the Edit JS role to provide access to this field as well. 

CSS applied here will only apply on the item, and only when directly on the page of that item. If it's used to alter an image in a blog post for instance, that won't affect how the post appears in widgets, or any notifications sent out by that post. It's used commonly to hide comments on announcements or files, or to adjust very particular elements on a single item. When you want to make a specific, one-time change, this area is invaluable. 

Space Headers

One of the seldom used areas of the Space Administration Panel is the Layout area, which offers access to the header and footer. Text and images placed here will load everywhere in the Space, and it offers the option to use a separate header for the front page. CSS added here will be applied everywhere in your Space, but only in your Space. 

We recommend adding the code to the footer, by accessing the code view and adding your <style> tags and CSS there. That will load the code after the rest of the page, ensuring that your digital workplace's CSS is applied first. This code can be maintained from the Space Administration Panel, which provides an area for Space Administrators to make adjustments or customizations particular to the needs of their teams or departments. 

Your digital workplace is designed to support an array of different CSS models and customizations, and we provide additional areas to customize beyond the Control Panel in order to ensure that every part of your Igloo has exactly the look and feel you need. 

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.