Styling and Appearance
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
base stylesheet creates the styles related to the widget's layout like margin, padding,
border-width, position. The second css file applies the widget's colors and backgrounds.
The jqx.base.css should be included before the second CSS file.
Below is the list of CSS classes used by jqxPanel.
- jqx-panel - applied to jqxPanel's 'DIV'
- jqx-panel-bottomright - applied to the Panel's element displayed when the horizontal
and vertical scrollbars are visible and the element is positioned below the vertical
scrollbar and on the right of the horizontal scrollbar.
When you create a custom style with colors and backgrounds for jqxPanel, you need
to do the following:
- Add the above CSS classes related to jqxPanel
- After each CSS class, add your theme name.
- To apply your custom style to jqxPanel, you need to set its 'theme' property(option)
to point to your theme name string.
- The sample below demonstrates how to set the 'Summer' theme to jqxPanel.