Tina Vo

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

1. Click on Guide admin
2. Click Settings
3. Click Customize theme
4. Click Edit theme
5. Select the CSS tab
6. 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;

}

 

7. Click Preview
8. Click Publish

 

Add some classy blockquotes

1. Edit an article you want to add a colored note to
2. Click the Source Code button
3. 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