Summary Block

Tutorial
Written By Johnny Moya

Summary blocks are used to highlight content from collection pages such as blog posts and events.

Once added, you may notice that changing the font properties can be rather difficult. However, Custom CSS can help!

In this resource article, we will guide you through basic manipulation of some CSS properties to help you customize your summary block’s font.

Summary Block Heading

Once you’ve navigated to the Custom CSS window, we want to use simple selectors to select the classes of our heading:

.sqs-block-summary-v2 {
   .summary-title, .summary-heading {
      font-family: /*Family Goes Here*/;
      font-weight: /*Weight Goes Here*/;
      font-size: /*Size Goes Here*/ !important;
      color: /*Color Goes Here*/;
   }
}

We can replace each of the properties above with values of our choosing. Additional properties can also be adjusted; play around with your styles.

Summary Block Excerpt

To manipulate the properties for the excerpt that appears in your summary block, all we have to do is change the selected classes:

.sqs-block-summary-v2 {
   .summary-excerpt p {
      font-family: /*Family Goes Here*/;
      font-weight: /*Weight Goes Here*/;
      font-size: /*Size Goes Here*/ !important;
      color: /*Color Goes Here*/;
   }
}

Put It All Together

Let’s combine everything we learned to create our sample summary block entry from QWC’s own website>

Notice our summary block heading has a purplish color, appears bigger, and is in all caps. Then, the excerpt below appears only slightly smaller than the heading. We can achieve this by using the CSS below:

.sqs-block-summary-v2 {
   .summary-title, .summary-heading {
      font-size: 22px !important;
      color: #c24fff;
      text-transform: uppercase;
   }
   .summary-excerpt p {
      font-size: 20px !important;
   }
}

We hope you enjoyed our quick walkthrough on editing your summary block. If you’d like to learn more, or have us help you achieve a truly unique design for your website, then feel free to contact us directly. Thank you!

Johnny Moya