Rich Editor includes the Callout feature, which allows you to apply the Callout format to your paragraphs in posts and articles to visually highlight important content. These are ideal when sharing announcements or best practices, or when you want to call out important notes or tips in knowledge base articles.
You can apply four types of Callouts:
How to apply Callouts
- Click into a paragraph to select it.
- Click the Element Toolbar to the left.
- Click the Special Formats Menu, followed by Callout.
- The Neutral callout is applied by default; click to select any of the four options, depending on your needs.
Customize your Callouts
You can customize the Callout icons, background colors, and fonts to match your brand:
- Background colors can be updated using Theme Variables in your Theme.
- Icons can be updated via the Icon Manager.
Customize Callout background color and font
You can customize the background color of each Callout, and their respective fonts, using Theme Variables, which are inserted into a Theme via the Advanced Settings panel.
- To access the panel, edit a custom theme and click Advanced Settings, as shown below. (The button always displays, irrespective of which section is being customized.)
NOTE: The styling applied below is for illustrative purposes only; replace the examples below with your desired styling.
Modify Callout background using the following Theme Variables:
"userContent.callout.neutral.bg": "#F2F0EB""userContent.callout.info.bg": "#D0F4DE""userContent.callout.warning.bg": "#EE0F68""userContent.callout.alert.bg": "#1571B8"
Modify Callout font styling using the following Theme Variables:
"userContent.callout.alert.font.color": "#FFFFFF""userContent.callout.alert.font.size": 48"userContent.callout.alert.font.textDecoration": "underline""userContent.callout.alert.font.weight": "bold""userContent.callout.alert.font.letterSpacing": 10"userContent.callout.alert.font.align": "right""userContent.callout.alert.font.lineHeight": 2"userContent.callout.alert.font.family": "Lato""userContent.callout.alert.font.transform": "uppercase"
Example
Notice how we not only changed the background color of each Callout but also used the "userContent.callout.warning.font.color": "#FFFFFF" and "userContent.callout.alert.font.color": "#FFFFFF" variables to change the warning and alert font color to white to make it easier to read.
TIP: Click the image below to enlarge.
TIP: When adding more than one variable, be sure to insert a comma "," after each one, except for the last one in the sequence. Refer to the image above for an example.
Customize Icons
- Access the Dashboard.
- Navigate to Appearance > Branding & Assets > Manage Icons.
- In the Filters field, type "callout" to quickly locate these icons.
- See Manage your Community's Icons to learn everything you need to know about this process.
