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.
```
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxNotification").jqxNotification({ theme: "summer", width: "auto", position: "top-left", opacity: 0.9,
            autoOpen: true, template: null, icon: { width: 25, height: 25, url: '../../images/smiley.png', padding: 5 }
        });
    });
</script>
```

The sample below demonstrates how to set the 'summer' theme to jqxNotification.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Notification Styling Sample</title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.summer.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxNotification").jqxNotification({ theme: "summer", width: "auto", position: "top-left", opacity: 0.9, autoOpen: true,
                autoClose: false, template: null, icon: { width: 25, height: 25, url: '../../images/smiley.png', padding: 5 }
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <div id="jqxNotification">
        Welcome to our website!</div>
</body>
</html>