icon-zia.svg
Secure Internet and SaaS Access (ZIA)

Customizing EUNs with CSS Styles

The Zscaler service provides notification templates for the Acceptable Use Policy (AUP), caution notification, quarantine notification, and three different block notifications (URL Categorization, Security Violation, and Web DLP Violation). The end user notifications (EUNs) are made up of a number of discrete table rows and columns. Each row uses a CSS style to control the properties of the row. On the Global Configuration page, there are message or text fields where you can enter CSS styles to modify the look of these notifications. You can change various properties and customize the appearance of the notifications, such as fonts, colors, borders, and dimensions, with CSS styles, HTML tags, and JavaScript.

The Zscaler service also supports multiple languages for these notifications. To learn more, see Multiple Language Support for EUNs.

This article describes the styles used in EUNs, and how you can use them to customize the appearance of EUNs with the various rows and their classes.

CSS style and JavaScript do not render when previewing EUN templates.

About CSS Styles

The following are the names of the CSS classes used to control the properties of the rows in a notification. You can use them to customize the appearance of EUNs.

Zscaler Support uses the class uq_cd to identify EUNs. Zscaler strongly recommends you don't modify the class.

CSS ClassDescription
bhbox header
eu_co rsnreason
eu_coEUN content
eu_co lnlink
eu_co fofooter
s_imgstatic image
redbackground
eu_hEUN header
btnbutton
uq_cdunique code
eu_co ststatic text

Customizing EUNs With CSS Styles

The following are example configurations of CSS styles that you can use to change the appearance of EUNs.

  • Enter the following CSS style in the notification text or message field to hide a row that appears in an EUN:

    <style> 
    .eu_co {
         visibility:hidden;
    }
    </style>
    

    Screenshot of the CSS style used to hide a row in an EUN.

    In this example, the CSS style hides the EUN content in the Web DLP Violation notification.

    Screenshot showing before and after effects hiding a row using CSS style.

    Close
  • Enter the following CSS style in the notification text or message field to hide the header row that appears in an EUN:

    <style> 
    .eu_h {
        font-size: 0;
    }
    .eu_h i {
        display: none;
    }
    hr:first-of-type {
    display: none;
    }
    </style>

    Screenshot of the CSS style used to hide the EUN header.

    In this example, the CSS style hides the header row in the URL Categorization notification.

    Screenshot showing the before and after effects of hiding the heading with CSS style..

    Close
  • All notification templates have two footers. One footer provides contact information for your IT Support. The other footer includes the Zscaler logo and a message by default.

    Close
  • To change the background color of a notification, you must know the CSS class name of the notification's background. The background of each template is styled with a default color and uses the following CSS classes:

    • The Acceptable Use Policy template uses green and class gr.

    • The caution template uses yellow and class yl.

    • The block template uses red and class red.

    • The quarantine template uses orange and class or.

    To change the background of a template to another color, enter the CSS class name of the template's background in the CSS style:

    <style> .red {background-color:lightblue;} .yl {background-color:lightblue;} .bh {background-color:lightblue;} .eu_co.st {background-color:lightblue;} </style>

    Template color change in caution notification

    In this example, the CSS style changes the caution notification background to light blue.

    Image showing the effects of changing the background to light blue

    Close
  • By default, a notification occupies 90% of your browser's width and has a maximum width of 790 pixels.

    To change the size limit of the AUP and EUNs, enter the following CSS style:

    <style> .m_tbl {width: 75%;max-width: 500px;} </style>

    Size limit change in caution notification

    In this example, the CSS style changes the caution notification to occupy 75% of your browser's width and has a maximum width of 500 pixels.

    Example showing the effects of using CSS to change the notification size of EUN and AUP

    Close
  • To display a timestamp on the EUN, enter the following code:

    <br><font size=-2>
    <script type="text/javascript">
    var e = Date.now();
    var d = new Date(e);
    document.write(d);
    </script>
    </font>
    

    Time display in URL notification

    In this example, The CSS style displays a current date and time for the URL Categorization notification.

    Screenshot showing a notification that now has a timestamp

    Close
Related Articles
Understanding Browser-Based End User NotificationsConfiguring Block NotificationsConfiguring the Acceptable Use PolicyConfiguring the Caution NotificationConfiguring the Quarantine NotificationCustomizing EUNs with CSS StylesMultiple Language Support for EUNs