Add Colored Notes in Articles
Our team adds context to our articles by adding colored notes in our articles. You can do this as well by following the below instructions
Add CSS to your theme
- Click on Guide admin
- Click Settings
- Click Customize theme
- Click Edit theme
- Select the CSS tab
- Paste the following CSS code at the bottom of your code
/*Colored Notes Style*/
border: red solid 1px;
border: blue solid 1px;
- Click Preview
- Click Publish
Add some classy blockquotes
- Edit an article you want to add a colored note to
- Click the Source Code button
- Surround your note with the following code replacing ADD YOUR NOTE HERE with your message
<blockquote class=”important”>ADD YOUR NOTE HERE</blockquote>
Change the class to “important” for a pink note.
<blockquote class=”important”>You really need to know this</blockquote>
Change the class to “fyi” for a blue note.
<blockquote class=”fyi”>This is good to know, but not imperitive</blockquote>
Great tip! thanks for posting, Tina.
Awesome tip, Tina! Our Zendesk is better because of the time you've put into this.
Very nice thanks for sharing Tina!
Great tip, Tina, thanks for sharing! Would like to add some more tips.
To take this further, you can add callout blocks where you can use different colors and frames to separate instructions, important links or call to action segments and direct your visitors to the sections of your pages that give you greatest gain and convey the message that you want to.
Learn how to use various callout blocks in Zendesk help center.
Lotus Themes Team
Thanks for sharing this additional information, Lotus! If you wanted to post a write-up of this in the Tips & Tricks section so members can see it without having to navigate away from the Community (with a link to the original source, of course!), that would be awesome! You'll get some thank-you swag, too. ;)
Thanks for sharing!
I like the way your note styles look. How do we get the CSS for them? (Do users have to download one of your themes to make it work?)
I love how you expanded the callouts LotusThemes. These look great!
You are right, users have to download one of our themes to make it work.
Lotus Themes Team
Cool, just checking. Thanks for replying!
This doesn't make sense to me. I only have the option to customize design>view theme>edit code>style.css
Where do I paste this? How to I preview it?
This article is outdated in terms of step. You need to paste the code at the bottom of your style.css file.
I'm trying to do this with the Copenhagen theme and I've added the code to the style.css file but it doesn't appear to working. Am I doing something wrong?
This is what's in the Style.CSS
This is what is in the source code for my article
@ Emily Wilson don't know much about CSS but I'm able to call out things by making a one-cell table and adding color.
Adjust the class in your HTML so that it reads as:
That should hopefully unblock you.
Active Feature Request (please vote):
Feature Request: Automatically Adding Colored Notes in Articles Based on Article Keyword
I just posted a Feature Request for this at the link below. If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"
Also, you may consider adding it to your post to get the feature request more visible.
I followed every step you explained above, but for some reason my content doesn't show with the colour options. Any idea what might be wrong?
Without seeing the code, here are a few things you might check:
- Is the text wrapped in an HTML element with a CSS class that has a color parameter?
- Is there a conflicting CSS class that is applied that is overriding your styling?
- Where are you viewing this? The article preview/published page will show our full CSS, but the draft page won't apply those styles. Knowledge capture may also not display your formatting as the CSS won't transfer with the HTML.
@ eagleapk don't know much about CSS but I'm able to call out things by making a one-cell table and adding color.
Please sign in to leave a comment.