Adding a note to a Help Center article can be extremely useful for drawing attention to crucial information. We often use it to call out notes, important disclaimers, caveats, warnings, risks, and any extra valuable details to customers.
The disclaimer at the beginning of this article is an example of a note. This support tip will take you through the following steps on how to add notes to Help Center articles:
Adding notes to your Help Center template CSS
Before you can add notes to your Help Center articles, you will need to add your note style to the CSS portion of your Help Center template. For help on customizing Help Center templates, see Customizing your Help Center theme.
To add notes to your Help Center template CSS
- In Guide, click the Customize design icon (
) in the sidebar. - Click the theme you want to edit to open it.
- Click the options menu, then select Edit Code.
- Click style.css at the bottom of the page to modify the CSS. The file opens in the code editor.
- Enter the following code:
/***** Note *****/ .callout { background-color: #fcf4b9; padding: 10px; margin-left: 15px; margin-right: 15px; margin-top: 15px; margin-bottom: 15px; } - Click Save in the top right to save your changes.
Adding notes to your articles
After you've added the note style to your CSS, you can include notes in your articles by adding the HTML to the source code.
To add notes to a Help Center article
- In an article, click the Source Code button (
) at the end of the editor's toolbar. - In the location you want to place your note, enter the following code:
<div class="callout">These are the words that will go in your note!</div> - Click Ok to save the source code.
The note will be added in the entered location.
11 Comments
Eve, this is great and works perfectly - thank you!
Is there any plan to add this as a regular style in the article editor?
Hey Deb -
We haven't currently heard of any plans to add this into the editor, but you're welcome to make that suggestion in the Product Feedback topic, where our Product Managers are more likely to see it.
Very helpful! +1 to seeing more graphical options like colored boxes, icons, etc. for special content.
Do you have an example of this callout? (would like to see an example of what it will look like)
Hi Mary - here's a link to a help center article with a note:
https://support.edx.org/hc/en-us/articles/206503268-What-languages-are-edX-courses-taught-in-
One suggestion for making this even better....Add an icon on the toolbar that allows you to add the callout without going into the HTML. Paste in your text and the css automatically formats the callout in the saved version of the article (don't have to preview to see). It would prevent Agents from messing with HTML code.
A simple icon to paste in text and click ok would be fantastic!
Thanks for the suggestion, Mary!
Concur with Mary's suggestion on this for Guide, but a minor modification and additional enhancement need around this.
As this is essentially a style, this should be accessible within the Style dropdown in the WYSIWYG editor.
Secondly, the WYSIWYG editor doesn't render custom styles at all.
So whilst the user may have the style correctly coded in the article source, they can't see and confirm it's working as until they've saved the article. This in turn means they risk publishing content which isn't yet intended for public consumption - solely to see if something worked (and presuming they have permissions to publish directly).
Mary and Michael -
I encourage you to post your feedback in the Product Feedback topic, so other users can see it, add their own comments, and vote for the ideas you're sharing.
Can you add a link to this in the Product Feedback topic?
Hey Mary - I see that you linked to this in your post in Product Feedback. If anyone else would like to add their voice or vote to Mary's suggestion, you can find it here: Add Callout icon on toolbar to make it easier to add callouts to articles
Please sign in to leave a comment.