How can I add a note to a Help Center article?

Question

How can I add a note to a Help Center article?

Answer

Adding a note to a Help Center article can be extremely useful for drawing attention to crucial information. The disclaimer at the beginning of this article is an example of a note. This workflow takes you through the steps on how to add notes to Help Center articles:

• Adding notes to your Help Center template CSS
• Adding note HTML to the source code of your article 

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also can't provide support for third-party technologies such as JavaScript, jQuery, or CSS. Please post any issues you have in the comments section or try searching for a solution online.

Adding notes to your Help Center template CSS

Before starting to add notes to your Help Center articles, 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

1. In Guide, click the Customize design icon  () in the sidebar. 
2. Click the theme you want to edit to open it. 
3. Click the options menu, then select Edit Code. 
   
4. Click style.css at the bottom of the page to modify the CSS. The file opens in the code editor. 
5. Enter the following code:

   /***** Note *****/
   
   .callout {
    		background-color: #fcf4b9;
       padding: 10px;
       margin-left: 15px;
       margin-right: 15px;
       margin-top: 15px;
       margin-bottom: 15px;
   }

6. Click Save in the top right to save your changes. 

Adding notes to your articles

After you added the note style to your CSS, include notes in your articles by adding the HTML to the source code. 

To add notes to a Help Center article

1. In an article, click the Source Code button () at the end of the editor's toolbar.
2. 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>

3. Click Ok to save the source code. 

The note is added in the entered location.