Add Note and Warning boxes to your Guide articles

Forum|Forum|10 years ago
August 19, 2015
29 replies
258 views

Daniel61

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;
}

Show first post

1
2

Forum|pagination.label 2 / 2

Kathy18
Forum|Forum|4 years ago
May 25, 2022

Hi, we translate over a dozen languages in our help center. how does translation work with disclaimers?

Like

E

Edwin11
Forum|Forum|4 years ago
May 25, 2022

Hi @kathy18,

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.

Like

J

Josh15
Forum|Forum|3 years ago
December 30, 2022

This was great, thanks for tip

Like

C

Colleen11
Forum|Forum|2 months ago
April 23, 2026

Hi all,

In the interest of sharing as I have found many additions on the community that have been helpful, we are using the above method within our help centre but have amended the code as follows to fit in with our style.

span[class=wysiwyg-color-red130] {
background: #ffefef;
color: #631010;
text-align: justify;
border-left: 5px solid #ff0000;
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: 2em;
}

Or

span[class=wysiwyg-color-green130] {
background: #e2ffe4;
color: #1b591f;
text-align: justify;
border-left: 5px solid #00ba0c;
margin: 1.5em 10px;
padding: 0.5em 10px;
display: block;
}

span[class=wysiwyg-color-green130]:before {
display: block;
white-space: pre;
content: "Tip:";
font-size: 2em;
}

We have further uses as well to highlight other items but using the above and just changing the swatch color

This bit span[class=wysiwyg-color-green130]

you can have as many as you wish ensuring you don't use any colors that are used as actual font changes. (We only use the bottom row swatches for example with all staff made aware that they are only used to achieve the notice windows)

I have been using this code for years but with the update it doesn’t seem to work anymore. I don’t know how to add it back into my guides and am worried about editing ones that currently have it. Has anyone figured out workarounds for this?

Like

1
2

Forum|pagination.label 2 / 2

Sign up

Login with SSO

Login to the community

Login with SSO