Add Colored Notes in Articles

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. 

Some examples:

Best, 

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

Hey LotusThemes,

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

Thanks!

I love how you expanded the callouts LotusThemes.  These look great!

Hey Jennifer,

You are right, users have to download one of our themes to make it work. 

Best, 

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?

Hi @Katie,

This article is outdated in terms of step. You need to paste the code at the bottom of your style.css file.

Team Diziana

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. 

Hi Emily, 

Adjust the class in your HTML so that it reads as:

<blockquote class="important">

That should hopefully unblock you. 

Active Feature Request (please vote):

Feature Request: Automatically Adding Colored Notes in Articles Based on Article Keyword

@Tina Vo

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.

https://support.zendesk.com/hc/en-us/community/posts/360046933913-Feature-Request-Automatically-Adding-Colored-Notes-in-Articles-Based-on-Article-Keyword

Hey 460420143,

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?

Hi @Johannes Ganter,

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. 

Thanks, Eagle apk! That's a useful tip.