Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

Badges & Labels Badges and labels are inline elements with multiple styles that can be used to create indicators and unread counts.

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

The examples below can be used inside other elements like content box headers, accordions, tabs, navigation menu links, etc.

1 2 2 3 4 4 5 6 Label example 1 Label example 2 Label 2 Label 3 Label 4 Label 4 Label 5 Label 6
Get source

                1
                2

                2
                3
                4

                4
                5
                6

                Label example 1
                Label example 2

                 Label 2
                 Label 3
                 Label 4

                 Label 4
                 Label 5
                 Label 6

            

Font color

You can create solid white badges & labels with different font colors.

35 35 35 35 35 35 35 35 .font-blue .font-red .font-orange .font-green .font-black .font-gray .font-gray-dark .font-white
Get source

                35
                35
                35
                35
                35
                35
                35
                35

                .font-blue
                .font-red
                .font-orange
                .font-green
                .font-black
                .font-gray
                .font-gray-dark
                .font-white

            

Opacity

You can take any badge or label element and add an opacity core helper class. Available opacity helpers: opacity-30, opacity-60 and opacity-80.

35 35 35 35 35 35 35 35
.font-blue .font-red .font-orange .font-green .font-black .font-gray .font-gray-dark .font-white
Get source

                35
                35
                35
                35
                35
                35
                35
                35

                .font-blue
                .font-red
                .font-orange
                .font-green
                .font-black
                .font-gray
                .font-gray-dark
                .font-white

            

Border radius

You can use the border radius helpers included in the core to change the CSS3 border radius of the elements, in this case, badges and label. The border radius helper classes can be applied to either all borders or only specific borders (eg. top right, bottom left & right, etc)

64 64 64 64 64 64 64 64
Get source

                64
                64
                64
                64
                64
                64
                64
                64

            

Positioned relative

Badges & labels can be stand alone elements as in the examples above or they can be integrated into different elements like (tabs, accordions headers, buttons, etc). These integrations can have one of two values, inline or absolute.

5 Inline Badge Example label

The content box header contains a right aligned inline label and a left aligned badge.

Right badge 11 54 Left badge
Get source

                

5 Inline Badge Example label

The content box header contains a right aligned inline label and a left aligned badge.

Right badge 11 54 Left badge

Positioned absolute

You can add absolute positioned badges and label to any element (buttons, tabs, accordions, etc). You can control the position using the float-left and float-right classes.