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.
  For example:
  jqx-notification-summer
• 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:
  • info
  • warning
  • success
  • error
  • mail
  • time
  
  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 button.
• The sample below demonstrates how to set the 'summer' theme to jqxNotification. [フレーム]