Documentation

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:

  <script type="text/javascript">
      $(document).ready(function () {
          // the 'layout' JSON array defines the internal structure of the layout
          var layout = [{
              type: 'layoutGroup',
              orientation: 'horizontal',
              items: [{
                  type: 'autoHideGroup',
                  alignment: 'left',
                  width: 80,
                  unpinnedWidth: 200,
                  items: [{
                      type: 'layoutPanel',
                      title: 'Toolbox',
                      contentContainer: 'ToolboxPanel'
                  }, {
                      type: 'layoutPanel',
                      title: 'Help',
                      contentContainer: 'HelpPanel'
                  }]
              }, {
                  type: 'layoutGroup',
                  orientation: 'vertical',
                  width: 400,
                  items: [{
                      type: 'documentGroup',
                      height: 400,
                      minHeight: 200,
                      items: [{
                          type: 'documentPanel',
                          title: 'Document 1',
                          contentContainer: 'Document1Panel'
                      }, {
                          type: 'documentPanel',
                          title: 'Document 2',
                          contentContainer: 'Document2Panel'
                      }]
                  }, {
                      type: 'tabbedGroup',
                      height: 200,
                      pinnedHeight: 30,
                      items: [{
                          type: 'layoutPanel',
                          title: 'Error List',
                          contentContainer: 'ErrorListPanel'
                      }, {
                          type: 'layoutPanel',
                          title: 'Output',
                          contentContainer: 'OutputPanel',
                          selected: true
                      }]
                  }]
              }, {
                  type: 'tabbedGroup',
                  width: 220,
                  minWidth: 200,
                  items: [{
                      type: 'layoutPanel',
                      title: 'Solution Explorer',
                      contentContainer: 'SolutionExplorerPanel'
                  }, {
                      type: 'layoutPanel',
                      title: 'Properties',
                      contentContainer: 'PropertiesPanel'
                  }]
              }]
          }];
          $('#jqxLayout').jqxLayout({ theme: 'energyblue', width: 700, height: 600, layout: layout });
      });
  </script>
  

• The sample below demonstrates how to set the 'energyblue' theme to jqxLayout: