Customizing the appearance of your digital workplace is a way to keep your digital workplace fresh, up to date with your employee branding, and gain the trust of your users. However, keep in mind that large-scale customizations and customizations of some digital workplace areas may require more frequent maintenance to keep them functioning as expected. To help you make your own decision on how far you want to push customizations in your digital workplace, we've constructed a list of best practices and categorized types of customizations into different risk levels. These risk levels identify customizations that will have a low, medium, or high chance of being disrupted by a product release. 

When Igloo releases upgraded functionality to your digital workplace, we don't want the theme or custom CSS to break key functionality or the user experience. You also don't want to miss out on new features! For these reasons, following the guidelines below will assist you in assessing and prioritizing the number of customizations your team is willing to use. 

Sections in this article:

• Best practices
• Low-risk customizations — go for it
• Medium-risk customizations — be careful
• High-risk customizations — use at your own risk

Best practices

1. Document, document, document!: An ideal place to document your customizations is on the /styles page, which many digital workplaces already have. If this location does not exist, create a hidden location on your site with admin access where you can keep this information. Use this location to document all customizations in a scalable way. Think, if you ever win the lottery and move on from your role, how can you easily pass documentation to the next administrator?  
2. Create consistencies: Avoid creating specific customizations for individual locations, groups, or features. Instead, create customizations that can be broader in their application. This will result in fewer customizations to maintain and a more consistent user experience.  
3. Develop with accessibility in mind: Consider how the customization might impact the accessibility of your site. You should:  
   • Provide alternate text for images. 
   • Use table headers when working with tables. 
   • Make hyperlinks that don't go anywhere buttons. 
   • Use ARIA attributes when applicable. 
   • Hide decorative/hidden elements from screen readers using visibility: hidden;, or display: none;.
   • Check color contrast on brand colors to ensure they meet WCAG 2.0 contrast standards:
     • 1.4.1 Use of Color
     • 1.4.3 Contrast (Minimum)
     • 1.4.6 Contrast (Enhanced)
     • 1.4.11 Non-text Contrast
   • Use the following tools to help review and audit accessibility: the following tools to help review and audit accessibility: 
   • Use accessibility tools to verify compliance. Some helpful tools are: 
     • Chrome Audit
     • WAVE
     • EightShapes Color Contrast Checker.
4. Leverage configuration options: Don't forget that we are continually releasing new configuration options for the platform. Keep up to date by following our Product News channel, and use these configuration options to alleviate the need for customizations.  

Low-risk customizations — go for it  

The following are things that you can and should look to do when customizing your digital workplace. At Igloo, we do these all the time because they are low maintenance and at low risk of breaking the user experience when new features are released.

• Use  !important to override the default styling of widgets. This is required as the widget styling is inline. Please limit its use to coincide with good coding practices.
• Changing the background color of the page body and content to another light color. Your workplace is optimized to use lighter colors. Darker colors may impact visibility and make it challenging to identify where content is compromised.
• Changing the background of the Userbar to another dark color. Using a light color would require creating new dark icons, and we strongly recommend against creating custom Userbar icons.
• Use high specificity. Some default CSS is specific.
• Keep the default Channel Color settings. If you need to override it, use the Channel Color with the closest color/shade. This helps maintain readability by contrasting the color with its text. 
• Changing the content area width. For the best user experience, you should avoid making it wider than 1600px. The page's middle column becomes very wide on large screens at larger widths.

Medium-risk customizations — be careful

These customizations are doable, but we do not recommend targeting these specific areas if your team doesn't have the proper documentation and resources to understand, implement and maintain the documentation over time. For these reasons, you may want to avoid the following customizations.  

• Styling by widget. Place a custom class on the widget instead. An example of what not to do would be making Blog Articles widgets have a 24px title font size while all other titles are 18px. All titles should be 18px, and there should be a class to increase the font size if that's required. 
• Overriding z-indexes. There are many items in your digital workplace that rely on the z-index. By overriding, or adding one, you may make another item inaccessible. 
• Overriding DOM structure. Adding elements is okay but avoid moving existing elements or changing the structure. 
• Adjusting the column widths or gutters. With responsiveness and the middle fluid column, altering the right and left columns widths will negatively affect views. You can use a row class to do small tasks (e.g., the fullwidth or the equal-column row classes). 
• Overriding the browser default focus styling. 
• Changing where the Content Slideshow widget's text is by default. 
• Changing the vertical locations of the indices. The indices must be below the slider content. 

High-risk customizations — use at your own risk

We do not recommend customizing these areas of your digital workplace. Making customizations to these areas could result in unexpected behavior and impact the difficulty of troubleshooting issues in the future. If you are going to target these areas, we do recommend a high level of documentation on how you targeted them to make troubleshooting and updating easier.   

• Adding or reordering Userbar items. 
• Creating new sprites (e.g., Rating icons, Userbar icons, etc.). 
• Changing core responsiveness. Responsiveness has been optimized for all content types, pages, and widgets. 
• Remove the icon for the Site Map widget. It's needed to expand the navigation. 
• Add widget type classes to any other object (e.g., use the ig-widget-type-html in the footer). 
• Never style system elements. These include: 
  • Blog Articles widget Load More button 
  • Profile photos 
  • Online Status 
  • Search page 
  • Content Type icons 
  • Action buttons 
  • System pages (Activity, Edit, Add, Advanced, etc.) 
  • Float menus (Usebar, event times, etc.) 
  • Trailer (Viewed x times), except hiding it 
  • Trailer Bar (Feedback, Broadcast, Follow), except hiding it 
  • Mobile navigation 
  • Icons within your digital workplace (object types, file types, etc.) 
  • Froala WYSIWYG editor 
  • File attachment 
  • Profile pages, except for hiding fields 
  • Sticky navigation on content viewing 
  • Comments section 
  • Directory page Users 
  • Reoccurring events view 
  • Wiki Compare feature