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.

See image.

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

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

  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.

  • Hide the IT Support Footer

    To hide the IT Support footer, use the class eu_co.fo and enter the following CSS style in the notification text or message field.

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

    

    In this example, the CSS style hides the IT Support footer in the Web DLP Violation notification.

    

    Close
  • Hide the Zscaler Footer

    The Zscaler footer is divided into two sections. The logo uses the class s_img, and the message uses the class name eu_co st.

    To hide the footer in a template, enter the following CSS style in the notification text or message field:

    <style> .eu_co.st {display: none;} .s_img {display:none;} </style>

    

    In this example, the CSS style hides the Zscaler footer in the Web DLP Violation notification.

    

    Close

  Close
• 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.

  See image.

  

  Close

  • The caution template uses yellow and class yl.

  See image.

  

  Close

  • The block template uses red and class red.

  See image.

  

  Close

  • The quarantine template uses orange and class or.

  See image.

  

  Close

  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