Customizing the AUP and EUNs with CSS Styles

The Acceptable Use Policy (AUP) and end user notifications (EUN) 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. You can change various properties, such as fonts, colors, borders, and dimensions with CSS styles, HTML tags, and Javascript to customize the appearance of the notifications.

This article describes the CSS styles that are used in the AUP and EUNs, and how you can use them to customize the appearance of the AUP and EUNs with the various rows and their classes. Click a section below to learn more:

About the AUP and EUN Templates

The service provides the following end user notification templates:

  • Acceptable Use Policy
  • Caution
  • Block
    • The service displays a block notification any time there is a policy violation. The service provides three types of block notifications that use the block template: URL Categorization Notifications, Security Violation Notifications, and Web DLP Violation Notifications.

To customize the templates, go to Administration > Resources > End User Notifications. On the End User Notification page, you can find the text fields where you enter CSS styles to modify the look of the notifications. Click Preview Template(s) to see what the notification looks like after any changes. You can preview the notification as many times as you want.

  • To change the appearance of the AUP notification, use the AUP Message (HTML) text field. See image.
  • To change the appearance of the caution notification, use the Caution Text text field. See image.

AUP Message (HTML)

AUP Message (HTML)

Caution Text

Caution Text
  • To change the appearance of the block notifications, you can either customize all three at the same time or customize each one individually.
    • Changing the Appearance of All Block Notifications
      To change the appearance of all three block notifications, use the Notification Message text field. See image.
      Any changes in this field affects the URL Categorization Notifications, Security Violation Notifications, and Web DLP Violation Notifications.
      For example, you can add a CSS style to change the color of a row's text to blue. See image.
    • Changing Individual Block Notifications

      Additionally, each block notification ( URL Categorization Notificiations, Security Violation Notifications, and Web DLP Violation Notifications) has its own individual Notification Text field where you can change the appearance of each notification separately. Any changes made to a block notification's Notification Text field modifies that notification alone. Note that if there are CSS styles modifying the same properties in the Notification Message text field and the Notification Text text fields, the CSS style in the individual Notification Text text fields take priority over the Notification Message text field.

      To customize each block notification separately, do the following:
      1. Select the block notification you want to modify. If you do not select the notification, then the notification uses its default appearance or shows changes made in the Notification Message text field.
        • Note that if you entered custom text and CSS styles, but choose to disable the block notification, you will still see the modifications in the previews. However, if you save, your users will not see these modifications.
      2. In the Notification Text text field of an individual block notification, you can make changes to the notification. See image.
        • For example, if you add a CSS style to change a row's text color in the text field of Security Violation Notifications, only the Deny Security notification shows the change. In this example, the CSS style used changes the color of the row's text to red. See image.

Notification Message

Notification Message

blue headers

blue headers

Notification Text

Notification Text

red header

red header

About CSS Styles

Below 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 the AUP and EUNs.

About CSS Styles

NOTE: The Support team uses the class uq_cd to identify EUNs. It is highly recommended that you do not modify the class.

Configuration Examples

Following are examples of CSS styles that you can use to change the appearance of the AUP and EUNs.

Hiding Rows

You can use a CSS style to hide a row that appears in the EUN. In this example, the CSS style used hides the header row in any notification.

Hiding Rows

Customizing the Background Color

To change the background color of a template, you need to know the class name of the template's background. The background of each template is styled with a default color and use the following classes:

  • The Acceptable Use Policy template uses green and the class gr. See image.
  • The caution template uses yellow and the class yl. See image.
  • The block template uses red and the class red. See image.

gr

gr

yl

yl

red

red

To change the background of a template to another color, you must include the specific class name of that template's background in the code. In this example, the following CSS style changes the background of the caution template to light blue.

.yl{
     background-color:lightblue;
}
.bh{
     background-color:lightblue;
}
.eu_co.st{
     background-color:lightblue;
}

Customizing the Footers

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

  1. To hide the IT Support footer, see below:

    The footer uses the classes eu_co fo. To hide the footer of a template, enter the following CSS style in its text field. In this example, the footer is hidden in the Deny DLP notification.
.eu_co.fo{
     display:none;
}
Customizing the Footers
  1. To hide the footer with the Zscaler logo and message, see below:

    This footer is divided into two sections. The logo uses the class s_img and the message uses the class names eu_co st. To hide the footer in a template, enter the following CSS style in its text field. In this example, the footer is hidden in the Deny DLP notification.
.eu_co.st{
     display: none;
}

.s_img{
     display:none;
}

Changing the Size Limit

By default, a notification occupies 90% of your browser's width and has a maximum width of 790 pixels. You can change the size limit of the AUP and EUNs with the following CSS style. In this example, the CSS style changes the notification's percentage to 75% and its maximum width to 500 pixels.

.m_tbl {
     width: 75%;
    max-width: 500px;
}
Changing the Size Limit

To learn how you can add or modify text in the AUP and EUNs, see the following: