Alert styles require the user to insert a <div> tag directly into the page's Source code around the text before the style can be applied.

1. Type your alert text into the WYSIWYG area of the block or page.
2. Click on the Show More Items icon at the end of your icon bar and then, from the submenu, click the Source icon.
3. When the page view updates, place a <div> tag above your <p>text and a closed div tag </div> after the end of the paragraph

<div>
	<p>This text is in the alert message</p>
</div>

4. Click the Source icon to return to your regular Edit view.
5. Highlight the text for your alert message, then click on the Styles menu and choose the format you want to apply.
6. Check the output and then scroll to the bottom and click the Save button when finished.

Applying an alert style used to be so much easier--what changed?

When the CKEditor module we use on SiteFarm, the one responsible for creating the text editor in your pages and blocks, was upgraded from version 4 to version 5, this particular option was removed by the module creators. Version 4 was very forgiving about inserting the div tag along with the style for you, but the newest version adheres to stricter rules that doesn't allow a div to be inserted around block elements with a class attached. For now, this barrier can be overcome by doing it manually through the Source screen. Our team is investigating how we might create a new web component for true alert boxes that meet the proper definition of alert and also address accessibility needs at the same time.