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 jqxFileUpload.

• jqx-file-upload - applied to the file upload.
• jqx-widget - applied to the file upload.
• jqx-widget-content - applied to the file upload.
• jqx-rc-all - applied to the file upload. Adds rounded corners to the widget.
• jqx-fill-state-disabled - applied to the file upload when it is disabled.
• jqx-file-upload-button-browse - applied to the "Browse" button.
• jqx-file-upload-button-upload - applied to the "Upload All" button.
• jqx-file-upload-button-cancel - applied to the "Cancel All" button.
• jqx-file-upload-file-row - applied to the "row" containing the selected file's name and the "Upload File" and "Cancel" buttons.
• jqx-file-upload-file-name - applied to the file name container.
• jqx-file-upload-file-upload - applied to the "Upload File" button.
• jqx-icon-arrow-up - applied to the icon of the "Upload File" button.
• jqx-file-upload-file-cancel - applied to the "Cancel" button.
• jqx-icon-close - applied to the icon of the "Cancel" button.
• jqx-file-upload-loading-element - applied to each file row's loading element (animated image).

When you create a custom style with colors and backgrounds for jqxFileUpload, you need to do the following:

• Add the above CSS classes related to jqxFileUpload.
• After each CSS class, add your theme name.
  For example:
  jqx-file-upload-summer
• To apply your custom style to jqxFileUpload, you need to set its 'theme' property (option) to point to your theme name string. You can also apply templates to the buttons "Browse", "Upload All" and "Cancel All" by setting the properties 'browseTemplate', 'uploadTemplate' and 'cancelTemplate' respectively. The available templates are 'primary', 'info', 'success', 'warning', 'danger', 'inverse', 'link' and 'default' (no template).