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 jqxNotification.
- jqx-widget - applied to the jqxNotification widget.
- jqx-notification - applied to the jqxNotification.
- jqx-notification-container - applied to the notifications container.
- jqx-notification-icon - applied to the notification's icon.
- jqx-notification-content - applied to the notification's content.
- jqx-notification-close-button - applied to the notification's close button.
- jqx-fill-state-normal - applied to the notification if the template
property is set to null.
When you create a custom style with colors and backgrounds for jqxNotification,
you need to do the following:
- Add the above CSS classes related to jqxNotification
- After each CSS class, add your theme name.
- To apply your custom style to jqxNotification, you need to set its 'theme' property(option)
to point to your theme name string. By default, a template is applied to the notification,
which overrides the theme setting. Here is a list of all available notification
Templates can be modified by changing the CSS of their classes. Each template uses
the following classes:
- jqx-notification-[template name] - applied to the whole notification.
- jqx-notification-icon-[template name] - applied to the notification's icon.
- jqx-notification-close-button-[template name] - applied to the notification's close
- The sample below demonstrates how to set the 'summer' theme to jqxNotification.