Add Note and Warning boxes to your Guide articles

28 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

    Awesome, tip! Thanks for sharing, Daniel!

    0
  • Colin Piper

    This looks so cool I am just going to create a random article so I can use it :)

    Cheers Daniel!

    0
  • Andrew Checkley

    Excellent thank you. how did you locate the color swatches number? I want to extend on your code on one of the other swatches to set up some other customer text for articles.

    Thanks

    Andrew

    0
  • Andrew Checkley

    Answered own question mouse over :) 

     

    Thanks though

    0
  • Charlotte Brogden

    This is how you style a tip box. Could you please let me know the markdown to create one? 

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hi Charlotte! 

    I gave you a couple links in your other post that should help you out. :)

    0
  • Charlotte Brogden

    Thank you!

    0
  • Duane Knudsen

    Daniel, I know you posted this a while ago but I putzed around with this today in my theme, it works great. Thank you for sharing. It's awesome!

    0
  • Glad to hear it! My original boxes in the post were super ugly. I've putzed around with mine quite a bit over the last few years too. :)

    0
  • Nicole Saunders
    Zendesk Community Manager

    Thanks for the update, Daniel. 

    0
  • Katie Novack

    Can you please tell me where I copy this code?

    0
  • Andrew Checkley

    You would need to be logged in as an admin and then

    1. click on "Guide Admin" Top right.

    2. Eye icon (left bar) Customize design.

    3. View theme

    4. three little dots in a square icon "Edit code"

    5. scroll to the bottom of the list on the left and open the file "style.css"

    6. Scroll to the bottom and add the code (on a new line.)

     

    Note. I add the following before hand to indicate the change should you review at a later date

    /* Start Custom blockquote font color swatch CSS */

    Anything between the open /* and the close */ is ignored and treated as a note. Its useful if you ever want to change or remove changes. 

    I then close with the following.

    /* End Custom blockquote font color swatch CSS */

     

    Thanks

    Andrew

     

     

    0
  • Andrew Checkley

    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)

    1
  • Duane Knudsen

    Beautiful Andrew, thanks for sharing.

    0
  • Melissa Curtis

    This is really amazing. Thank you for sharing. I've added the CSS code but not sure how to use it in the editor itself. I've updated the code to include a <span> with the right class but it isn't working. I think the piece that's missing is the ::before.

    How does that work exactly? 

    Thanks. 

    0
  • If you've added the code to the 'style.css' page, you can use the corresponding Text color in the article editor to color blocks of selected text (see the GIF below). Once you Save the article and view it in the Help Center, the styling you added to the CSS will be applied. 

    0
  • Jessie Schutz
    Zendesk Customer Care

    Thank you to everyone who has added their additional code!

    0
  • I adopted Andrew Checkley's design for our Help Center. :) It's cleaner than what I've posted.

    0
  • Andrew Soderberg
    Community Moderator

    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
  • Brett Bowser
    Zendesk Community Manager

    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
  • Victoria Campagna

    Is it possible to add an asset image before "Important" and "Tip" using Andrew Checkley's method?  

    Thanks,
    Victoria

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    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

    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
    Community Moderator
    Zendesk Luminary

    Hi Victoria Campagna

    Are you open to modify your current code?

    Thanks

    Pulkit

    Team Diziana

    0
  • Victoria Campagna

    Hi Pulkit,

    Definitely.  I don't mind changing the look.

    -Victoria

    0
  • Kathy Mashalla

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

    0
  • Edwin Schukking

    Hi Kathy Mashalla,

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

    This was great, thanks for tip

    0

Please sign in to leave a comment.

Powered by Zendesk