Add Note and Warning boxes to your Guide articles

20 Comentários

  • Jennifer Rowe
    Ações de comentário Permalink

    Awesome, tip! Thanks for sharing, Daniel!

    0
  • Colin Piper
    Ações de comentário Permalink

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

    Cheers Daniel!

    0
  • Andrew Checkley
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Answered own question mouse over :) 

     

    Thanks though

    0
  • Charlotte Brogden
    Ações de comentário Permalink

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

    0
  • Jessie Schutz
    Ações de comentário Permalink

    Hi Charlotte! 

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

    0
  • Charlotte Brogden
    Ações de comentário Permalink

    Thank you!

    0
  • Duane Knudsen
    Ações de comentário Permalink

    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
  • Daniel Murphey
    Ações de comentário Permalink

    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 - Community Manager
    Ações de comentário Permalink

    Thanks for the update, Daniel. 

    0
  • Katie Novack
    Ações de comentário Permalink

    Can you please tell me where I copy this code?

    0
  • Andrew Checkley
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Beautiful Andrew, thanks for sharing.

    0
  • Melissa Curtis
    Ações de comentário Permalink

    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
  • Daniel Murphey
    Ações de comentário Permalink

    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. 

    1
  • Jessie Schutz
    Ações de comentário Permalink

    Thank you to everyone who has added their additional code!

    0
  • Daniel Murphey
    Ações de comentário Permalink

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

    0
  • Andrew Soderberg
    Ações de comentário Permalink

    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 - Community Manager
    Ações de comentário Permalink

    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

Por favor, entrar para comentar.

Desenvolvido por Zendesk