Custom CSS Properties

Login page

• #header .navbar-inner
  identifies the top gray bar, an example to change its background color may be:

  #header .navbar-inner { background-color:#f9bd3d; }

• #dashboard-wrap
  identifies the main page container, the background image can be changed overriding its property:

  #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:

  #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:

  #header .navbar-inverse .navbar-inner { background-color:#c79731 }

• #dashboard-wrap
  identifies the main page container, the background image can be changed overriding its property:

  #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:

  #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