Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

Overlays & Loading screens Overlays & Loading screens are useful when you want to inform your visitor that he should wait while your pages are loading or an action is executed.

Theming

Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers.

Core color helpers:

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Template color schemes:

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .primary-bg and for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

Basic

To create an overlay with loading icon you need to specify the color scheme by using the data-theme anchor attribute. Opacity can be set using the data-opacity anchor attribute.

Opacity

You can use the data-opacity attribute to specify one of the following values: 60 - for 60% opacity, 100 - for 100% opacity and 80 - for 80% opacity.

Box refresh

You have the possibility of adding refresh buttons to content box headers.

To view the available content boxes options & configurations you can visit the Fides Admin Content Boxes documentation page.

Refresh button Refresh button

This content box has a refresh button in its header that uses the .bg-white core helper for the overlay, data-opacity set to 60% and loading image set to dark - using the data-style="dark" attribute.
Get source

                

Refresh button Refresh button

This content box has a refresh button in its header that uses the .bg-white core helper for the overlay, data-opacity set to 60% and loading image set to dark - using the data-style="dark" attribute.