Add Colored Notes in Articles

19 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

    Great tip! thanks for posting, Tina.

    0
  • Dan Cooper
    Community Moderator

    Awesome tip, Tina!  Our Zendesk is better because of the time you've put into this.

    0
  • Jacob the Moderator
    Community Moderator
    Zendesk Luminary

    Very nice thanks for sharing Tina!

    0
  • 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

    0
  • Jessie Schutz
    Zendesk Customer Care

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

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    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!

    0
  • Dan Cooper
    Community Moderator

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

    0
  • Hey Jennifer,

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

     

    Best, 

    Lotus Themes Team

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Cool, just checking. Thanks for replying!

    0
  • Katie Novack

    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?

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    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

    0
  • Emily Wilson

    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

    0
  • Miriam LOCKSHIN

    @ 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. 

    0
  • Dan Cooper
    Community Moderator

    Hi Emily, 

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

    <blockquote class="important">

    That should hopefully unblock you. 

    1
  • Alejandro Colon

    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.

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

    0
  • Johannes Ganter

    Hey @...,

    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?

    0
  • Dan Cooper
    Community Moderator

    Hi @...,

    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. 
    0
  • Eagle apk

    @ eagleapk don't know much about CSS but I'm able to call out things by making a one-cell table and adding color. 

     
    1
  • A A

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

    0

Please sign in to leave a comment.

Powered by Zendesk