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 Class | Description |
---|---|
bh | box header |
eu_co rsn | reason |
eu_co | EUN content |
eu_co ln | link |
eu_co fo | footer |
s_img | static image |
red | background |
eu_h | EUN header |
btn | button |
uq_cd | unique code |
eu_co st | static text |
Customizing EUNs With CSS Styles
The following are example configurations of CSS styles that you can use to change the appearance of EUNs.
- Hiding Rows
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>
In this example, the CSS style hides the EUN content in the Web DLP Violation notification.
Close - Hiding the Header
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>
In this example, the CSS style hides the header row in the URL Categorization notification.
Close - Hiding Footers
- Changing the Background Color
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>
In this example, the CSS style changes the caution notification background to light blue.
Close - Changing the Size Limit
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>
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.
Close - Displaying a Timestamp
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>
In this example, The CSS style displays a current date and time for the URL Categorization notification.
Close