Add Colored Notes in Articles
Posted May 16, 2017
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 on Guide admin
- Click Settings
- Click Customize theme
- Click Edit theme
- Select the CSS tab
- 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;
}
- Click Preview
- Click Publish
Add some classy blockquotes
- Edit an article you want to add a colored note to
- Click the Source Code button
- Surround your note with the following code replacing ADD YOUR NOTE HERE with your message
<blockquote class=”important”>ADD YOUR NOTE HERE</blockquote>
Change the class to “important” for a pink note.
<blockquote class=”important”>You really need to know this</blockquote>
Change the class to “fyi” for a blue note.
<blockquote class=”fyi”>This is good to know, but not imperitive</blockquote>
2
19 comments
A A
Thanks, Eagle apk! That's a useful tip.
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
Dan Cooper
Hi 1500066334741,
Without seeing the code, here are a few things you might check:
0
Johannes Ganter
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?
0
Alejandro Colon
Active Feature Request (please vote):
Feature Request: Automatically Adding Colored Notes in Articles Based on Article Keyword
9514964927
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
Dan Cooper
Hi Emily,
Adjust the class in your HTML so that it reads as:
That should hopefully unblock you.
1
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
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
Trapta Singh
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
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
Sign in to leave a comment.