Adding a note to a Help Center 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 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
• Adding note HTML to the source code of your article 

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

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'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

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 will be added in the entered location.