Jump to content

How to insert html quotes or notes

Recommended Posts

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.


Link to comment
Share on other sites

  • 1 month later...
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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

	color: red;


Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...