How to insert html quotes or notes

[OptimusBain]

Good day everyone,

I am trying to insert notes in some of custom pages I am building. I also need to insert nice CSS quotes when I post in my forum but I can't find a way to do it. 

I currently use the Quote option in CK Editor to make a sentence stand out, which is 'fine' but then I always see Quote next to the gray text, but it's not a quote that I am writing but a note.  

I would like to create notes to explain things better whenever I post, something like the attachment. Is there a way to do that? I want to create a similar style to quite certain text and make it stand out within reading Quote next to it. Wordpress' quotes work great and it only adds the quotes, no Quote next to it 

Thanks a lot for your patience.

[opentype]

You can create custom editor buttons for this in the ACP. It looks like this:

[OptimusBain]

3 hours ago, opentype said:

You can create custom editor buttons for this in the ACP. It looks like this:

That's awesome. I will give it a try. I didn't know that could be done!! Thanks so much

[Afrodude]

On 7/4/2020 at 12:37 PM, Alfonso Moreno said:

That's awesome. I will give it a try. I didn't know that could be done!! Thanks so much

Have you tried it because I did, and yet didn't work out.

[Daniel F]

6 hours ago, Afrodude said:

Have you tried it because I did, and yet didn't work out.

What didn't work? What's the used code? What's the code after submitting the post?

[Afrodude]

49 minutes ago, Daniel F said:

What didn't work? What's the used code? What's the code after submitting the post?

<span class="article-quote">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span>

Well the button added successfully, yet It shows like a normal text. 

[opentype]

My screenshot only demonstrated how to add a custom button. The code merely adds a CSS class to a text span. You need to set the CSS declarations yourself in your custom.css. 

[Afrodude]

4 hours ago, opentype said:

My screenshot only demonstrated how to add a custom button. The code merely adds a CSS class to a text span. You need to set the CSS declarations yourself in your custom.css. 

I didn't pay attention to that. I work almost 14 hours a day and everyday, so whenever I open my computer my brain already somewhere else. 

[bfarber]

To expand on @opentype's post, you can navigate in the AdminCP to Customization (paintbrush icon) > Themes. Click the </> icon next to your front end theme (if you have more than one you will want to do this for each). Click the "CSS" tab in the left hand column, then click on the custom.css file.

From there you can add something like this, adapting it to display however you want

.article-quote
{
	color: red;
}