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 onGuide admin
- ClickSettings
- ClickCustomize theme
- ClickEdit theme
- Select theCSStab
- Paste the following CSS code at the bottom of your code
/*Colored Notes Style*/
blockquote.important {
background-color:pink;
border: red solid 1px;
padding:10px;
margin:10px;
color:black;
font-style:italic;
text-align:left;
}
blockquote.fyi {
background-color:lightblue;
border: blue solid 1px;
padding:10px;
margin:10px;
color:black;
font-style:italic;
text-align:left;
}
- ClickPreview
- ClickPublish
Add some classy blockquotes
- 编辑一篇文章你想添加一个颜色的报告
- Click theSource Codebutton
- Surround your note with the following code replacing ADD YOUR NOTE HERE with your message
ADD YOUR NOTE HERE
Change the class to “important” for a pink note.
You really need to know this
Change the class to “fyi” for a blue note.
This is good to know, but not imperitive
-
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.
更进一步,您可以添加callout块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 variouscallout blocks in Zendesk help center.
Some examples:
Best,
Lotus ThemesTeam
-
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 ThemesTeam
-
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 yourstyle.cssfile.
TeamDiziana
-
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 Wilsondon'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:
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.
-
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?
-
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.
-
@eagleapkdon't know much about CSS but I'm able to call out things by making a one-cell table and adding color.
Pleasesign into leave a comment.
18 Comments