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 jqxLayout.
- jqx-layout - applied to the jqxLayout.
- jqx-widget - applied to the jqxLayout.
- jqx-widget-content - applied to the jqxLayout.
- jqx-rc-all - applied to the jqxLayout.
- jqx-layout-group-root - applied to the root layout group.
- jqx-layout-group-default - applied to layout groups.
- jqx-layout-group-document - applied to document groups.
- jqx-layout-group-tabbed - applied to tabbed groups.
- jqx-layout-group-auto-hide - applied to auto hide groups.
- jqx-layout-group-auto-hide-content-horizontal - applied to the content sections
of horizontally-aligned auto hide groups.
- jqx-layout-group-auto-hide-content-vertical - applied to the content sections of
vertically-aligned auto hide groups.
- jqx-layout-pseudo-window - applied to pseudo-jqxWindows in tabbed and auto hide
groups.
- jqx-layout-pseudo-window-header - applied to pseudo-jqxWindow headers.
- jqx-layout-pseudo-window-title - applied to pseudo-jqxWindow titles.
- jqx-layout-pseudo-window-pin-icon - applied to pseudo-jqxWindow pin icons.
- jqx-layout-pseudo-window-pinned-icon - applied to pseudo-jqxWindow unpin icons.
- jqx-layout-pseudo-window-close-icon - applied to pseudo-jqxWindow close icons.
- jqx-layout-pseudo-window-content - applied to pseudo-jqxWindow content sections.
- jqx-layout-resize-feedback - applied to the horizontal and vertical resize feedbacks.
- jqx-layout-resize-feedback-horizontal - applied to the horizontal resize feedback.
- jqx-layout-resize-feedback-vertical - applied to the vertical resize feedback.
- jqx-layout-resize-feedback-warning - applied to the resize feedbacks when a minimum
width has been reached.
When you create a custom style with colors and backgrounds for jqxLayout, you need
to do the following:
- Add the above CSS classes related to jqxLayout
- After each CSS class, add your theme name.
For example:
jqx-layout-energyblue
- To apply your custom style to jqxLayout, you need to set its 'theme' property (option)
to point to your theme name string:
- The sample below demonstrates how to set the 'energyblue' theme to jqxLayout: