User Guide Navigation

Customize the Style Turning an element into a Block Alert/Highlight

Interface

Block Alerts/Highlights interface

Turning on the Block Alerts/Highlights Tool

This is an Intermediate level Design Tool

To turn this tool:

Click the Design Tools Settings icon in the Jump Menu
Do one of the following:
1. Choose Intermediate or Advanced from the Select a Comfort Level area
2. Manually turn on the Block Alerts/Highlights tool by clicking the switch below the tool name
Close the Design Tools Settings

Block Alerts and Highlight Examples

Draw attention to content by adding block alert styles and highlights to content.

Options include styles pulled based off of Boostrap, styles created specifically for Design Tools as well as alert styles from the Canvas Style Guide.

Bootstrap Alerts

Bootstrap Alert Primary

Bootstrap Alert Secondary

Bootstrap Alert Success

Bootstrap Alert Danger

Bootstrap Alert Info

Bootstrap Alert Light

Bootstrap Alert Dark

Bootstrap Callout Primary

Bootstrap Callout Secondary

Bootstrap Callout Success

Bootstrap Callout Danger

Bootstrap Callout Info

Bootstrap Callout Light

Bootstrap Callout Dark

Design Tools Specific

Message Heading Tip

Message Heading Info

Message Heading Success

Message Heading Warning

Message Heading Danger

Message Block Tip

Message Block Info

Message Block Success

Message Block Warning

Message Block Danger

Canvas Style Guide

Canvas Alert

Canvas Alert Error

Canvas Alert Success

Canvas Alert Info

Canvas Well

Set Block Alert/Highlight Style

To set a block alert/highlight style for an element, follow these steps:

Open the page for editing.
Click Launch Design Tools.
In the Design Tools menu, click Customize the Style.
Click Current Element Style.
Click the Block Alerts/Highlights tool to expand tool if needed.
Place your cursor within the element to which you want to set the style.
Use the Apply To controls if you want to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
Select the desired style
On the content page, click Save.

To remove the style, follow the instructions above to identify the element you want to reset and then click the Remove Alert Style button.

Tip: You can click the Jump to Current Element Style panel button in the jump menu to jump right to the Current Element Style panel.

Wrap Multiple Elements in a Block Alert

To wrap multiple elements in your content in an alert:

Follow the instructions above to open the Block Alerts/Highlights tool.
Use your cursor to highlight the elements in the rich content editor.
Click the Wrap Selection in a block alert button to create the alert.
Use the Apply To controls to select the div around your contents and change the alert style as desired.