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:
- Adding disclaimers to your Help Center template CSS
- Adding the disclaimer HTML to the source code of your article
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
- 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 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
- 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 disclaimer is added in the entered location.
21 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
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
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.
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
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?
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
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
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!
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
Hello, can we add the disclaimer to just one of the languages available in our Help Center? Thanks a lot!
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
Please sign in to leave a comment.