Theme Builder

Theme settings

Import colors from a theme

Theme Builder for jQWidgets

The Theme Builder is a tool which helps you to create a new theme for jQWidgets.
  • Import colors from a theme - enables you to import the colors from an existing theme.
  • Theme settings - edit the widgets colors and states.

Getting started with the Theme Builder

  • Choose a state. For example, click "Header areas".
  • Click on any DropDown to edit a state color("Header background" and "Header background2" specify the background for the header areas, "Header border" specifies the border color, "Header color" specifies the text color).

  • Preview the changes by clicking the "Update Preview" button.
  • Get the theme by clicking the "Get Theme" tab.
  • In case you wish to import the colors from an existing theme, click on a Theme name from the "Import colors from a theme" section.
  • Theme settings
    • Header areas
      • Header background and Header background 2 - determines the background for the header areas(Grid columns, Calendar and Window title, Tabs header, etc.).
      • Header border - determines the border color.
      • Header color - determines the text color.
      • Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
    • Content areas
      • Content background - determines the background for the content areas(Grid cells, Calendar, Tabs and Window content, etc.).
      • Content border - determines the border color.
      • Content color - determines the text color.
      • Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
    • Default state
      • Default state background and Default state background 2 - determines the background in the default display state(buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
      • Default state border - determines the border color.
      • Default state color - determines the text color.
      • Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
      • *Some of the themes include additional settings like "Alt default state color". These settings are used for styling theme specific elements(jqxNavigationBar items, jqxTabs tabs in default state, etc.). For example, the "Bootstrap" theme has an additional "Alt default state color" setting which determines the text color of the jqxTabs and jqxNavigationBar items in the default state.
    • Hover state
      • Hover state background and Hover state background 2 - determines the background in the hover display state(grid and calendar cells, buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
      • Hover state border - determines the border color.
      • Hover state color - determines the text color.
      • Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
      • *Some of the themes include additional settings like "Alt hover state color". These settings are used for styling theme specific elements(jqxGrid and jqxCalendar cels in hover state, jqxListBox items in hover state, jqxCalendar cells in hover state, etc.).
    • Active(Selected) state
      • Active state background and Active state background 2 - determines the background in the active display state(grid and calendar cells, buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
      • Active state border - determines the border color.
      • Active state color - determines the text color.
      • Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
      • *Some of the themes include additional settings like "Alt active state color". These settings are used for styling theme specific elements(jqxGrid and jqxCalendar cels in hover state, jqxListBox items in hover state, jqxCalendar cells in hover state, etc.).
    • Misc
      • Font family - determines the font family used by the widgets.
      • Border radius - determines the border radius of the widgets.
      • Alternating background - determines the background of the Grid cells when the "altrows" property is set to true.
      • Alternating color - determines the text color of the Grid cells when the "altrows" property is set to true.
      • Alternating background 2 - determines the background of the Grid cells in a sorted, pinned or filtered column.
      • Alternating color 2 - determines the text color of the Grid cells in a sorted, pinned or filtered column.
      • Context menu background - determines the background of the context menu(in the Preview, a context menu is available in the Grid - move the cursor over a column and click the dropdown button to open a context menu).
      • Focus border - determines the boder color when a widget is on focus.
      • Cells color - determines the Grid cells text color.
      • Cells border - determines the Grid cells border color.
      • Radio button check color - determines the color of the radio button's check mark.
    • Inputs, dropdowns and lists
      • Input background - determines the background of text inputs.
      • Input border - determines the border color of text inputs.
      • Input color - determines the text color of text inputs.
      • DropDown background - determines the background of drop downs(jqxDropDownList, jqxComboBox, jqxMenu).
      • DropDown border - determines the border color of drop downs.
      • DropDown color - determines the text color of drop downs.
    • Tooltips
      • Tooltip background and Tooltip background 2 - determines the background for the tooltips(jqxTooltip).
      • Tooltip border - determines the border color.
      • Tooltip color - determines the text color.
    • Buttons and scrollbar
      • Button background and Button background 2 - determines the background for the buttons(jqxButton).
      • Button border - determines the border color.
      • Button color - determines the text color.
      • Scrollbar background - determines the background color of the scrollbar(jqxScrollBar).
      • Scrollbar border - determines the border color.
      • Scrollbar thumb border - determines the border color of the Thumb element.
      • Scrollbar thumb background and Scrollbar thumb background 2- determines the background of the Thumb element.
      • Scrollbar thumb hover border - determines the hovered(mouse cursor is over the element) border color of the Thumb element.
      • Scrollbar thumb hover background and Scrollbar thumb hover background 2- determines the background of the hovered Thumb element.
      • Scrollbar thumb active border - determines the active(mouse button is pressed) border color of the Thumb element.
      • Scrollbar thumb active background and Scrollbar thumb active background 2- determines the background of the active Thumb element.
      • Scrollbar button border - determines the border color of the buttons.
      • Scrollbar button background and Scrollbar button background 2 - determines the background of the scrollbar buttons.
      • Scrollbar button hover background and Scrollbar button hover background 2 - determines the background of the hovered scrollbar buttons.
      • Scrollbar button hover border - determines the border color of the hovered buttons.
      • Scrollbar button active background and Scrollbar button active background 2 - determines the background of the active scrollbar buttons.
      • Scrollbar button active border - determines the border color of the active(pressed) buttons.
      • Scrollbar button icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
      • Scrollbar button hover icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons) when the button is hovered.
      • Scrollbar button active icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons) when the button is pressed.
    • Save and Load the Theme's Settings
      • Save - gets the Theme Builder's state. You can copy it to a new file.
      • Load - loads the Theme Builder's state. Paste into the Text Area the settings information and click the "Load Theme Settings" button.

Getting and using the Theme

  • Create a new CSS file in the jqwidgets/styles folder.
  • Click the "Get Theme" tab.
  • Enter your theme's name in the input field.
  • Click the "Get CSS..." button.
  • Copy and Paste the CSS from the text area into your new CSS file.
  • Include the CSS file in your project after jqx.base.css.
  • Set the "theme" property of any widget to your theme's name.

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.custom.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Set the button's theme.
            $("#jqxButton").jqxButton({ theme: "custom" });
        });
    </script>
</head>
<body class='default'>
    <input type="button" value="Button" id='jqxButton' />
</body>
</html>