Custom Elements 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 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.