Customizing the appearance of your digital workplace so that it reflects your brand is a common desire. Following the guidelines below will assist you in this process.
The following are things that you should look to do when customizing your digital workplace:
- 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.
- Use light colored backgrounds for the body and content. Your digital workplace is optimized to use lighter colors. Darker colors may impact visibility and make it difficult to identify where content is compromised.
- Use dark colors for the background of the Userbar. The icons within the Userbar are sprites and to make the icons dark a new sprite is required. Custom sprites should be avoided to limit issues with new icons.
- Use a Widget's Layout tab. Trying to update the layout outside the provided options can cause issues with future updates.
- Use high-specificity. Some default CSS is specific.
- Keep the default Channel Color settings. If you do need to override it, use the Channel with the closest color/shade. This helps maintain readability by contrasting the color with its text.
Avoid the following when customizing your digital workplace. Failing to do so may result in unexpected behavior and could impact the difficulty of troubleshooting issues.
- Styling by Widget. Place a custom class on the Widget instead. An example of what not to do would be making Blog Widgets only have 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 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 (ex. the fullwidth or the equal-column row-classes).
- Adding items to the Userbar.
- Reordering items with the Userbar.
- Creating new sprites (ex. Rating, Userbar, etc.).
- Overriding the browser default focus styling.
- Changing the page width.
- Changing core responsiveness. Responsiveness has been optimized for all content types, Pages, and Widgets.
- 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.
Never do the following when customizing your digital workplace. Failing to do so will result in unexpected behavior and could impact the difficulty of troubleshooting issues.
- Remove the icon for the Site Map Widget. It's needed to expand the navigation.
- Add Widget type classes to any other object (ex. use the ig-widget-type-html in the footer).
- Never style system elements. These include:
- Blog Widget Load More button
- Profile Images
- 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
When customizing your digital workplace be sure to follow accessibility best practices. These include:
- 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.
- Use the following tools to help review and audit accessibility: