Wolf X Machina

Back to blog

Responsive Pull Quotes in EasyDNNNews

Posted in DNN on October 29, 2019

Check out this brilliant pull quote. I want to show you how you can create this for your bloggers.

A client I work with runs a popular blog and asked me how they can add in some simple but prominent pull quotes into their articles. I looked into using Custom Fields in EasyDNNnews, but that doesn't give my bloggers control to place quotes anywhere within the body of the article.

So I've come up with a way for my bloggers to create pull quotes within their articles using the CK Editor and some relatively simple CSS.

Pull quotes offer a nice way to display quotes in an article and they're easier than you might think to set up and train your bloggers to make. In this article, I will show you how to do it in EasyDNNnews and CK Editor but this could apply to even HTML modules using CK Editor.

Prerequisites

  1. You need to be able to add a bit of CSS to the website
  2. You have to be using CKEditor and you or your blogger's role must have the Full Toolbar. Learn more about configuring the toolbar

The CSS

Add this CSS to your DNN skin or portal.css or EasyDNNnews template CSS file.

/* base pull-quote style */

/* the pull quote container to give it some structure */
.pull-quote {
  margin-bottom: 30px;
}

/* the blockquote style */
.pull-quote blockquote {
  font-size: 1.4em !important;
  margin: 0 !important;
  width: 100% !important;
  font-style: normal !important;
  color: rgb(101, 101, 101);
  line-height: 1.5em !important;
  border-top: 2px solid rgba(101, 101, 101, 0.5);
  border-bottom: 2px solid rgba(101, 101, 101, 0.5);
  padding: 20px 0;
}

/* remove bottom margin from last element inside quote */
.pull-quote blockquote > :last-child {
  margin-bottom: 0;
}

/* override default.css styles */
.pull-quote blockquote p {
  font-size: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* medium+ screen responsive styles to position quotes outside of article body */
@media screen and (min-width:992px) {
  .pull-quote.pull-quote-left {
    float: left !important;
    margin: 30px 60px 30px -100px !important;
    width: 45% !important;
  }
  .pull-quote.pull-quote-right {
    float: right !important;
    margin: 30px -100px 30px 60px !important;
    width: 45% !important;
  }
}

Feel free to change the CSS to whatever style you want. 

Create pull quotes in CK Editor

  1. Edit your article
  2. Find the position in the article where you want to add a quote and enter a new line
  3. In the CKEditor Toolbar, click "DIV" Blockquote / Div in the toolbar
  4. A modal dialog will appear. In the "Stylesheet Classes" field, type in the two classes:
    pull-quote pull-quote-left

    Edit Div
    • Optionally, use pull-quote-right to make it appear on the right side
    • You can also only use pull-quote if you don't want the quote to pull left or right
  5. Click "Ok"
  6. Then in the Toolbar, click the Blockquote icon
  7. Type (or paste) in your quote
  8. Click "Update and View"
  9. View your pull quote and test it out in different screen sizes.

If you want to change the alignment of the quote, go back to edit the article and you can right click on the quote and a menu will appear so you can "Edit Div." From there you can update the classes on the div.

Let me break down what you're doing by following those steps: you're creating a div, adding pull-quote and pull-quote-left CSS classes to that div, then creating a blockquote element inside that div, and then adding paragraphs of quotes. If you're familiar with the Source code tab, feel free to look at the HTML to see what's happening. But your editors shouldn't need to.

Caveats

  1. The CK Editor doesn't display the pull quote style while you're editing so it can be hard to see how it will look until you actually save and view the article
  2. Because pull quotes use floats in CSS, sometimes the wrapping can be weird depending on what content follows
  3. Moving your blockquotes can be tricky inside the CK Editor. Sometimes it's easier to simply delete it and start it again if you want to move it

Conclusion

People who know me know that I love structured content where content editors don't have to worry about HTML, CSS, formatting, layout, or classes. While this solution is not the simplest for your editors, I think it's relatively easy to do. They say that "perfect is the enemy of the good" - I think this is a pretty good solution.

I hope you find this useful. If you could use some assistance with improving your DNN website,  I would love to help you. Check out my DNN services at https://wolfxmachina.com/expert-dnn-development

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More