Highlight alerts: sticky notes and news blocks - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki

Purpose

Yellow

• Yellow "sticky note" highlights are page-specific and/or a lower level of importance than the red banner alerts.

• To add a highlight alert to the page, insert the saved Elementor section template alert-sticky-note-text-width-yellow.

Blue

• Blue "sticky note" highlights are page-specific and usually used to highlight additional content that lives elsewhere.
• To add a highlight alert to the page, insert the saved Elementor section template alert-sticky-note-text-width-blue.

Steps

While logged into the site as an admin, go to the page to be edited and click Edit with Elementor in the black bar at the top.

Hovering over the top section of the page will reveal a plus sign. Click that to add a new section. Next click the folder to add a section template.

Be sure you are viewing My Templates, then search for sticky and insert the template into the page

Once the template has been inserted, edit the text using the pane on the left. The key styles are in our custom css style sheet (class .highlight-box or .highlight-box-blue) found in Dashboard > Appearance > Simple CSS (++Highlight boxes section) and should not be changed.

Don't forget to save your changes by clicking Update at the bottom of the left editing panel.

News post

Sometimes there is an update or other reason why a news post needs a highlight alert added to the top. Formatting is a simple paragraph with a standard background color, as indicated in the screenshot.