Features/Customized design

Usage

To customize the look and feel of your platform, you can excert detailed control of all design elements

• Stylesheets defining colors, graphics and fonts
• Templates (rendering) controlling how pages are rendered
• Wrapper controlling the header and footer on all pages
• Language where labels on buttons are set
• Buttons which controls the iconography

Note that default design is well tested 100% responsive, so take care not using too many !important or fixed width declarations.

Design quickstart

For a most basic functional customer design you can define 3 colors and a URL to a logo.

Instructions

1. Designer > Design > Stylesheet
2. Edit values in
   • themePrimary
   • themeSecondary
   • background
3. Reload page with CTRL + SHIFT + R

Context sensitive styling

In some cases your design needs to change according to usecase, user in question or choices made using the application.

By default the following CSS classes are added to the page depending on the situation

• Command requested: Ex. editCommand
• Language selected: Ex. daDK, enUK
• User template: Ex. IsAdministrator, IsAnonoumous

In addition it is possible to add a CSS class to a group, and then all users in that group will have that class added to their page.

Templates

The HTML templates contains tags, that helps the system render correctly. The template can contain bothe generic field markers, and specific ones tied to a single field. The rendering will first look for a specific tag, and if that is not present default to the generic ones. Templates can be shared between multiple entities, or be tied to a single one.

Note: When editing templates make sure that they are still WCAG compliant. Ordering of elements and ID markup is important for it to work.