Theme Variables

When it comes to our stylesheets for the website or portal, we have a set of predefined variables that are available for use. These are enabled by default on all provided themes.

Note: These are not required to be used and the Stylesheet Code section allows you to do any stylesheet code you feel relavent. This is a more advanced feature than just using the color pickers to choose your colors.

Available Variables

• Body
  • : The background color of the page.
  • : The text color of the page.
  • : The border color of text boxes and wherever borders are used.
  • : The ending color for any shadow effects.
  • : The starting color for any shadow effects.
  • : What fonts should the page be using.
  • : What should the default font size for the page be.
  • : The background color of the footer.
  • : The text color of the footer.
  • : The background color of the header.
  • : The text color of the page header.
  • : The color of any HR rules on the page.
  • : Is the background image to be shown for the entire page.
• Alert Boxes
  • : The Alert Danger background color.
  • : The Alert Danger border color.
  • : The Alert Danger border color.
  • : The Alert Dark background color.
  • : The Alert Dark border color.
  • : The Alert Dark border color.
  • : The Alert Info background color.
  • : The Alert Info border color.
  • : The Alert Info border color.
  • : The Alert Light background color.
  • : The Alert Light border color.
  • : The Alert Light border color.
  • : The Alert Primary background color.
  • : The Alert Primary border color.
  • : The Alert Primary border color.
  • : The Alert Secondary background color.
  • : The Alert Secondary border color.
  • : The Alert Secondary border color.
  • : The Alert Success background color.
  • : The Alert Success border color.
  • : The Alert Success border color.
  • : The Alert Warning background color.
  • : The Alert Warning border color.
  • : The Alert Warning border color.
• Buttons
  • : The default button text color.
  • : The background color for the Delete button.
  • : The text color for the Delete button.
  • : The background hover color for the Delete button.
  • : The text hover color for the Delete button.
  • : The background color for the Duplicate button.
  • : The text color for the Duplicate button.
  • : The background hover color for the Duplciate button.
  • : The text hover color for the Duplicate button.
  • : The background color for Grouped buttons.
  • : The text color for Grouped buttons.
  • : The background hover color for Grouped buttons.
  • : The text hover color for Grouped buttons.
  • : The background color for the Save button.
  • : The text color for the Save button.
  • : The background hover color for the Save button.
  • : The text hover color for the Save button.
• Checkboxes
  • : The background color for checkboxes when they are turned off.
  • : The border color for checkboxes when they are turned off.
  • : The color of the checkbox DOT when they are turned off.
  • : The background color for checkboxes when they are turned on.
  • : The background color for checkboxes when they are turned on.
  • : The color of the checkbox DOT when they are turned on.
• Dropdown Menus
  • : The background color of the dropdown menus.
  • : The background hover color of the dropdown menus.
  • : The text color of the dropdown menus.
• Grids
  • : Grid Alert Level 1 Background Color.
  • : Grid Alert Level 1 Border Color.
  • : Grid Alert Level 1 Text Color.
  • : Grid Alert Level 2 Background Color.
  • : Grid Alert Level 2 Border Color.
  • : Grid Alert Level 2 Text Color.
  • : Grid Alert Level 3 Background Color.
  • : Grid Alert Level 3 Border Color.
  • : Grid Alert Level 3 Text Color.
  • : Grid Alert Level 4 Background Color.
  • : Grid Alert Level 4 Border Color.
  • : Grid Alert Level 4 Text Color.
  • : Grid Alert Level 5 Background Color.
  • : Grid Alert Level 5 Border Color.
  • : Grid Alert Level 5 Text Color.
  • : Grid Alert Level 6 Background Color.
  • : Grid Alert Level 6 Border Color.
  • : Grid Alert Level 6 Text Color.
  • : Grid Alert Level 7 Background Color.
  • : Grid Alert Level 7 Border Color.
  • : Grid Alert Level 7 Text Color.
  • : The background color of the grid.
  • : The text color of the grid.
  • : The row text color of the grid.
  • : The even row background color.
  • : The odd row background color.
  • : The color of the text for when the mouse hovers over a row.
  • : The background color when a mouse hovers over a row.
  • : When you are using a grid item you can select rows this is the background color.
  • : When you are using a grid item you can select rows this is the text color.
  • : The toolbar background color of the grid.
  • : The toolbar text color of the grid.
• Icons
  • : The primary color of icons.
  • : The secondary color of icons.
• Inputs
  • : The input boxes background color.
  • : The input boxes text color.
• Menus & Links
  • : The link color for any links on the page not part of any dropdowns or menus.
  • : The link hover color for any links on the page not part of any dropdowns or menus.
  • : The background color of the menus on the top of the pages.
  • : The text color of the menus on the top of the pages.
  • : The navigation menu background color.
  • : The navigation menu text color.
  • : The open/close button background color for the side menu.
  • : The open/close button text color for the side menu.
  • : The open/close text hover color for the side menu.
• Scrollbars
  • : This is the background color of the scrollbar.
  • : The height of the scrollbars. This should be entered as number with PX at the end (13px).
  • : The bar that horizontal/vertical scroll bar part that you grab.
  • : The width of the scrollbars. This should be entered as number with PX at the end (13px).
• Panels
  • : The background color of the panels that are on all the edit/settings pages.
  • : The footer background color of the panels that are on all the edit/settings pages.
  • : The text color of the panels that are on all the edit/settings pages. This is also for the panel footer.
  • : The header background color of the panels that are on all the edit/settings pages.
  • : The header text color of the panels that are on all the edit/settings pages.
• Sidebar
  • : The background color of the sidebar menu.
  • : The text color of the sidebar menu links.
  • : The width of the side bar that comes out from the left.