CMS Customization

Custom CSS Properties

Login page

#header .navbar-inner
identifies the top gray bar, an example to change its background color may be:
Example
```
#header .navbar-inner { background-color:#f9bd3d; }
```
#dashboard-wrap
identifies the main page container, the background image can be changed overriding its property:
Example
```
#dashboard-wrap { background-image:url("http://www.yourwebsite.com/link_to_your_image.jpg"); }
```
#cms-login-register-box
identifies the middle box containing the login fields, an example to change its background color may be:
Example
```
#cms-login-register-box { background-color:rgba(188, 124, 33, 0.70); }
```

Dashboard

#header .navbar-inverse .navbar-inner
identifies the top dark bar, an example to change its background color may be:
Example
```
#header .navbar-inverse .navbar-inner { background-color:#c79731 }
```
#dashboard-wrap
identifies the main page container, the background image can be changed overriding its property:
Example
```
#dashboard-wrap { background-image:url("http://www.yourwebsite.com/link_to_your_image.jpg") }
```

#sidebar
identifies the left side menu, an example to change its background color and menu items may be:

Example

#sidebar { background-color:#f9bd3d; }
#sidebar .nav > li.active > a { background-color:#fdebc5; color:#000000; }
#sidebar .nav > li > a:hover { background-color:#fdebc5; }

Role-based class

On #dashboard-wrap element (which wraps all the cms content) a role-based class is included to allow CSS customization based on the user role.

#dashboard-wrap .cmsrole-admin
available when role = admin
#dashboard-wrap .cmsrole-superuser
available when role = superuser
#dashboard-wrap .cmsrole-user
available when role = user