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
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.
- 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'
- The sample below demonstrates how to set the 'summer' theme to jqxFileUpload and
the templates 'success', 'primary' and 'warning' to the "Browse", "Upload All" and
"Cancel All" buttons respectively: