English (US)
  1. Zendesk help
  2. Guide
  3. Advice and troubleshooting
  4. Help Center customization

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

Eve
  • Edited
Zendesk team member

Question

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

Answer

Adding a disclaimer to a Help Center article can be extremely useful for drawing attention to crucial information. The disclaimer called Disclaimer just below is an example of a note disclaimer. This workflow takes you through the steps on how to add disclaimers to Help Center articles:

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 disclaimers to your Help Center template CSS

Before starting to add disclaimers to your Help Center articles, add the disclaimer style to the CSS portion of your Help Center template. For help on customizing Help Center templates, see the article: Customizing your Help Center theme. 

To add disclaimers 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 the disclaimer HTML to the source code of your article 

After you added the note style to your CSS template, include disclaimers 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 disclaimer is added in the entered location. 

Return to top
Have more questions? Submit a request

21 Comments

  • Deb Chatigny

    Eve, this is great and works perfectly - thank you!

    Is there any plan to add this as a regular style in the article editor?

    1
  • Nicole S.
    Zendesk Community Team

    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. 

    0
  • Elizabeth B

    Very helpful! +1 to seeing more graphical options like colored boxes, icons, etc. for special content.

    0
  • Mary Paez
    • Edited

    Do you have an example of this callout?  (would like to see an example of what it will look like)

    0
  • Deb Chatigny

    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-

    0
  • Mary Paez

    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!

    3
  • Jessie Schutz
    Zendesk team member

    Thanks for the suggestion, Mary!

    0
  • Michael H

    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).

    0
  • Nicole S.
    Zendesk Community Team

    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. 

    0
  • Mary Paez

    Can you add a link to this in the Product Feedback topic?

    0
  • Nicole S.
    Zendesk Community Team

    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

    0
  • Catherine Michalak
    Community Moderator

    Hi all,

    I have several brands / help centers on my zendesk instance. I've successfully added this to one of the brands and it works perfect. I've done the exact same thing for another brand and nothing happens. Any idea what could be going wrong? I've added the code at the bottom of the style.css page.

    Thanks

    0
  • Dan Ross
    Community Moderator

    Hey Catherine, 

    The common case for CSS failing is that there's a syntax issue. Can you post the last 30 lines or so of your CSS for both the brand that is working and the one that isn't? Usually there's a missing semicolon or } somewhere.

    0
  • Catherine Michalak
    Community Moderator

    Hi Dan, 

    This is from the brand where it works:

    .search-result-votes::before {
    content: "\1F44D";
    }

    .search-result-meta-count::before {
    content: "\1F4AC";
    }

    .search-result .meta-group {
    align-items: center;
    }

    .search-result-breadcrumbs {
    margin: 0;
    }

    .search-result-breadcrumbs li:last-child::after {
    content: "·";
    display: inline-block;
    margin: 0 5px;
    }
    /***** Note *****/

    .callout {
    background-color: #dbf3fa;
    padding: 10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    }

     

    And this is from the brand where it doesn't

    .panel-danger > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #eed3d7;
    }

    .panel-info {
    border-color: #bce8f1;
    }

    .panel-info > .panel-heading {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    }

    .panel-info > .panel-heading + .panel-collapse .panel-body {
    border-top-color: #bce8f1;
    }

    .panel-info > .panel-footer + .panel-collapse .panel-body {
    border-bottom-color: #bce8f1;
    }
    accordioncss.txt
    Displaying accordioncss.txt.
    /***** Note *****/

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

     

    Thanks

    0
  • Dan Ross
    Community Moderator

    Hey Catherine,

     

    Can you try taking out the accordioncss.txt and the Displaying accordioncss.txt. lines to test? Those aren't lining up with typical CSS formatting that I'm familiar with.

    What happens when those lines are removed?

    0
  • Catherine Michalak
    Community Moderator

    Hi Dan,

    Thanks for that - it solved the issue. Those accordion lines were part of the code for the collapsable text. Didn't seem to cause any issues before but taking those out didn't break that functionality either and the note works now as well.

    Thanks again.

    Catherine

    0
  • Ron de Vries

    Hello Dan, 

     

    Maybe you can and are willing to take a look at my style.css as well. I am struggling with the Colored Notes section. This has been added in the syle.css but I can't seem to get the colored notes in the articles through the source code. I tried

    <div class="blockquote.important">These are the words that will go in your note!</div>

    The style.css looks like this: 

     

    .sub-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0px;
    min-height: 50px;
    padding-bottom: 15px;
    }

    .article [role="button"] {
    flex-shrink: 0;
    width: 100%;
    display: none;
    }

    .article-body pre {
    background: #f6f6f6;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #ECECEC;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
    font-size: 13px;
    }

    /*Colored Notes Style*/

    blockquote.important {

    background-color:pink;
    border: red solid 1px;
    padding:10px;
    margin:10px;
    color:black;
    font-style:italic;
    text-align:left;
    }

    blockquote.fyi {
    background-color:lightblue;
    border: blue solid 1px;
    padding:10px;
    margin:10px;
    color:black;
    font-style:italic;
    text-align:left;
    }

     

    Let me know if you need more information. If anyone knows something please feel free to react. Thanks so much in advance! 


    BR, 

    Ron

     

     

    0
  • Dan Ross
    Community Moderator

    Hey Ron, 

    You're close! Instead of blockquote.important as your classname, can you try blockquote-important? the CSS syntax for dots is causing an issue in this case. Additionally, your entries in your CSS need a dot before the entry, to select classes matching that name.

    Here's a sample that worked for me. The parts that are bolded are the parts that have changed.

    <div class="blockquote-important">These are the words that will go in your note!</div>

    /*Colored Notes Style*/

    .blockquote-important {

    background-color:pink;
    border: red solid 1px;
    padding:10px;
    margin:10px;
    color:black;
    font-style:italic;
    text-align:left; 
    }

    Let me know if that works!

     

    1
  • Ron de Vries

    Hi Dan, 

    That works, thank you so much! However I didn't work in my Copenhagen theme but I have made a new custom theme were it works. 

    Thanks again for your help! :) 

    BR, 

    Ron

    0
  • Silvia Calatayud

    Hello, can we add the disclaimer to just one of the languages available in our Help Center? Thanks a lot! 

    0
  • Ifra Saqlain
    Community Moderator

    Hey Silvia, You can add this in one language while creating article. If you write article in english language then the article won't change in anthor language.

    It depends only you that what language you would choose to write.
    Thanks

    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk