Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

Information Boxes Information boxes can be used to build dashboards showing important informations like charts, growth numbers, trends etc.

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

You can style the information boxes using the included core helper classes and the response messages backgrounds like we did in the examples below.

Monthly analytics 65.4 +0.5
New visitors 21.16 -5.4
Unpaid orders 74.83 =3,14
Overdue orders 92.12 +0.5
Current growth 765 -2.1
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Get source

                
Monthly analytics 65.4 +0.5
New visitors 21.16 -5.4
Unpaid orders 74.83 =3,14
Overdue orders 92.12 +0.5
Current growth 765 -2.1
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9

Icons

For better user experience you can add a big fancy icon to the left of the information boxes. You need to add the icon-wrapper class to the .info-box element.

Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5
Get source

                
Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5

Charts

Information boxes can also contain charts instead of icons.

To view the available charts options & configurations you can visit the Supina Admin Sparklines Charts documentation page.

Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5
Get source

                
Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5

Alternate Charts

The following information boxes have smaller charts and different title position.

New visitors

32.000 +0.5

Overdue orders

2,4,6,-4,-2,0,5,7,10,-4,-10,0,0,2,4,-5,4
32.000 +0.5

Example title

Loading...
32.000 +0.5

Example title

1,2,4,6,9,4,4,3,1,7,2,4,6,9,4,4,3,1,7,5,9,10
32.000 +0.5
Get source

                

New visitors

32.000 +0.5

Overdue orders

2,4,6,-4,-2,0,5,7,10,-4,-10,0,0,2,4,-5,4
32.000 +0.5

Example title

Loading...
32.000 +0.5

Example title

1,2,4,6,9,4,4,3,1,7,2,4,6,9,4,4,3,1,7,5,9,10
32.000 +0.5

Alternate Charts 2

This example was created without using any aditional code.

5,6,7,5,9,8,6,3,2,1,2,4,2,2,4,6,7
Current growth 765 -8.1
5,6,7,9,9,5,6,7,9,9,5,3,2,2,4,6,7
New visitors 21.8 +5.2
5,6,7,9,9,8,6,3,2,1,2,4,4,6,7
Overdue orders 92.12 +0.5
7,3,6,3,8,4,1,5,8,6,3,2,5,6
Monthly analytics 65.4 +2.1
Get source

                
5,6,7,5,9,8,6,3,2,1,2,4,2,2,4,6,7
Current growth 765 -8.1
5,6,7,9,9,5,6,7,9,9,5,3,2,2,4,6,7
New visitors 21.8 +5.2
5,6,7,9,9,8,6,3,2,1,2,4,4,6,7
Overdue orders 92.12 +0.5
7,3,6,3,8,4,1,5,8,6,3,2,5,6
Monthly analytics 65.4 +2.1