Add Note and Warning boxes to your Guide articles
Posted Aug 19, 2015
Like those little Note and Warning boxes? Want them in your Help Desk articles? You can quickly turn any piece of text into one of those by inserting a little CSS into your Help Desk code.
This hijacks two of the WYSIWYG color swatches built into the article editing tool. The specific colors are pink120 and pink130, shown below.
Just add these lines to your CSS, upload the :before images to the Assets section, and fill in the background url for the :before elements. Then when creating an article, highlight the text you want to turn into one of these and select the corresponding Info or Warning color, and viola! Once you publish the article, you will have those nice, shiny boxes. Feel free to tweak the colors to your liking or to match your brand, and comment to show us how you used it!
See a live example here: https://knowledge.chronotrack.com/hc/en-us/articles/204785404
span[class=wysiwyg-color-pink120] {
background: repeating-linear-gradient(
135deg,
#e2e2e2,
#e2e2e2 30px,
#d9d9d9 30px,
#d9d9d9 60px
);
color: #fa4000;
font-weight: bold;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 20px;
padding-top: 8px;
border-radius: 20px;
border: dashed 2px #ff6600;
font-style: italic;
display: block;
text-decoration: none;
margin-top: 14px;
margin-bottom: 4px;
}
span[class=wysiwyg-color-pink120]:before {
content: url('');
width: 50px;
height: 40px;
display: inline-block;
float: left;
}
span[class=wysiwyg-color-pink130] {
background: repeating-linear-gradient(
135deg,
#e2e2e2,
#e2e2e2 30px,
#d9d9d9 30px,
#d9d9d9 60px
);
color: #cc0000;
font-weight: bold;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 20px;
padding-top: 8px;
border-radius: 20px;
border: solid 2px red;
font-style: italic;
display: block;
text-decoration: none;
margin-top: 14px;
margin-bottom: 4px;
}
span[class=wysiwyg-color-pink130]:before {
content: url('');
width: 50px;
height: 40px;
display: inline-block;
float: left;
margin-bottom: 0px;
}
##### EDIT JULY 2018 #####
I've since opted for a simpler, cleaner, less-yucky design for these boxes for my Guide site, so I figured I'd share. The boxes now use "i" and "!" in the :before elements rather than the images, so it's also tidier.
CSS:
span[class=wysiwyg-color-pink120] {
background: #00a2ff;
color: #fff;
font-weight: bold;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 20px;
padding-top: 8px;
border: solid 1px #e6e6e6;
display: block;
min-height: 70px;
text-decoration: none;
margin-top: 14px;
margin-bottom: 4px;
box-shadow: rgba(136, 136, 136, 0.439216) 0px 2px 3px;
}
span[class=wysiwyg-color-pink120]:before {
content: "i";
font-size: 60px;
width: 30px;
z-index: 2000;
display: inline-block;
float: left;
margin-top: -20px;
padding-left: 10px;
}
span[class=wysiwyg-color-pink120] a {
color: #333;
text-decoration: underline;
}
span[class=wysiwyg-color-pink130] {
background: #ff6600;
color: #fff;
font-weight: bold;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 20px;
padding-top: 8px;
border: solid 1px #e6e6e6;
display: block;
min-height: 70px;
text-decoration: none;
margin-top: 14px;
margin-bottom: 4px;
box-shadow: rgba(136, 136, 136, 0.439216) 0px 2px 3px;
}
span[class=wysiwyg-color-pink130]:before {
content: "!";
font-size: 60px;
width: 30px;
z-index: 2000;
display: inline-block;
float: left;
margin-top: -20px;
padding-left: 10px;
}
span[class=wysiwyg-color-pink130] a {
color: #333;
text-decoration: underline;
}
0
28 comments
Josh
This was great, thanks for tip
0
Edwin Schukking
Hi 1900340206204,
For each language variation you would have your article in, you would select the text you would like to be in a note or warning box and choose either the note or warning colour you have selected in your CSS. In your HelpCenter the text you have selected in your article should then appear in a box.
If you like to include text in a box outside of your articles, you probably need to edit the HTML code in the .hbs template file your text appears. You would only need to make sure the content defined by the curlybars you have included in the template file will be displayed in the note or warning colour.
If you would like to also have a header, like IMPORTANT or TIP, displayed in the correct language, you could try if including a placeholder with dynamic content in your CSS would work. But I am not sure that would work.
0
Kathy Mashalla
Hi, we translate over a dozen languages in our help center. how does translation work with disclaimers?
0
Victoria Campagna
Hi Pulkit,
Definitely. I don't mind changing the look.
-Victoria
0
Pulkit Pandey
Hi Victoria Campagna
Are you open to modify your current code?
Thanks
Pulkit
Team Diziana
0
Victoria Campagna
Hi Pulkit,
This is the code I have in style.css for orange "Important" boxes:
/** Below is for the orange Important boxes **/
span[class=wysiwyg-color-red130] {
background: #FFF1E1;
color: #2F3941;
text-align: justify;
border-left: 5px solid #F49E44;
margin: 1.5em 10px;
padding: 0.5em 10px;
display: block;
}
span[class=wysiwyg-color-red130]:before {
display: block;
white-space: pre;
content: "Important:";
font-size: 24px;
}
The boxes look like this:
But I want it to look like this with a little image (ignore the white around the image):
I have this asset, but do not know how to add it:
As always, thank you for all of your help :)
-Victoria
0
Pulkit Pandey
Hi Victoria Campagna
Do you have an HTML code to display the Admonitions? you can add an image using the CSS
Thanks
Pulkit
0
Victoria Campagna
Is it possible to add an asset image before "Important" and "Tip" using Andrew Checkley's method?
Thanks,
Victoria
0
Brett Bowser
Thanks for sharing your feedback Andrew!
I see you also added your feedback in the following feedback post: Enrichment Zendesk Guide Article Editor
I've posted here as well to help provide visibility to other users in need of similar functionality.
Thanks again!
0
Andrew Soderberg
While re-defining a couple of the colors to create the notes or warnings gets you the result you want (kinda), this is really a hack (and not accessibility compliant). We should not have to be doing these hacks.
Zendesk should really update the TinyMCE WYSIWYG editor and/or add the many useful editing tools that have been available for this WYSIWYG editor for many years. If you want I will be glad to write another comment with ALL the popular WYSIWYG tools that we are not getting that we should have. Quickest way to see you own favorites that your not getting is to go here: https://www.tiny.cloud/features
The TinyMCE editor natively supports creating custom styles like the one they use for Notes.
How about bringing the article editor that Zendesk uses for it's OWN Guide articles for the rest of us to use in our articles!
For example: Article Notes...
Zendesk article notes are comprised of
<div class="p">
<div class="note note">
<div class="notetitle">Title</div>
Note body text.
</div></div>
Why can't we have the WYSIWYG tool that assigns these tags and styles to our content in articles. I am sure I can find more like this. We should have access to the same Guide tools that Zendesk uses itself! see image:
0
Sign in to leave a comment.