How do I add a custom notification box to a Zendesk Help Center article?

Using custom coloured note boxes in Zendesk Articles is a great way to highlight key points or gotchas to ensure your message gets across. Here's what it looks like and how to add it to your Guide theme.       

Adding the custom code to the help centre theme:

1. Navigate to your theme code settings by going to Guide Settings > Customize Design () > Click Customize on the theme you would like to edit.

2. Once inside the theme click the blue 'Edit Code' button and then select the style.css theme page to add the custom code too.

3. On the style.css page, scroll to the bottom and paste in the CSS class.

Add the following CSS class to the style.css theme page:

.note {
position: relative;
padding: 20px;
border: 1px solid #33ccff;
background-color: rgba(0,204,255, 0.1);
width: 100%;
margin: 30px auto;
color: #4e5565;
font-style: italic;
line-height: 28px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

4. Click the blue Publish button to save the changes added to the theme.

Adding the note source code to the article:

We recommend creating an article template page that contains the custom note coding. By doing this, the option to use the note when creating the article will be present and will render correctly on the published version of the article. If a note isn't needed for the article, the agent can simply delete the note from the article text before publishing. 

Article Settings:

• Title: [Article Template]
• Description: Ensure the note source code has been added to the article

1. Create a new article and set [Article Template] as the article title

2. Click on the source code button in the WYSIYG editor to open the source code window.

3. Add the following to the article source code:

<div class="note">
<img style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;" src="/hc/article_attachments/4403097416729/information__2_.png" alt="information__2_.png" width="21" height="21">&nbsp;
<strong>NOTE: This is a custom note</strong>
</div>

4. Save the article as a draft.

After you save the article, the note will look like this in the article description box during edit mode:

When an article which contains the above source code is published on the help centre, the note will then render in the blue color.

  NOTE: If you would like to change the border and background colours for the note: 

border: 1px solid #33ccff;
background-color: rgba(0,204,255, 0.1);