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:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>jQuery Layout Styling Sample</title>
      <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
      <style type="text/css">
          .jqx-layout-group-auto-hide-content-vertical
          {
              width: 200px;
          }
      </style>
      <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxlayout.js"></script>
      <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>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
  <body>
      <div id="jqxLayout">
          <!--autoHideGroup-->
          <div data-container="ToolboxPanel">
              List of tools</div>
          <div data-container="HelpPanel">
              Help topics</div>
          <!--documentGroup-->
          <div data-container="Document1Panel">
              Document 1 content</div>
          <div data-container="Document2Panel">
              Document 2 content</div>
          <!--bottom tabbedGroup-->
          <div data-container="ErrorListPanel">
              List of errors</div>
          <div data-container="OutputPanel">
              Output</div>
          <!--right tabbedGroup-->
          <div data-container="SolutionExplorerPanel">
              Solution structure</div>
          <div data-container="PropertiesPanel">
              List of properties</div>
      </div>
  </body>
  </html>