Beautiful Summary Block

---

Description

Give summary blocks with a wall or grid layout a new style. This plugin uses css editor and works with all template families.

---

How To Install

Go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Beautiful Summary Block Design //

.sqs-gallery-design-autocolumns-slide, .sqs-gallery-design-autogrid-slide {
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  -moz-box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
  box-shadow: 0px 0px 15px rgba(100, 100, 100, 0.1) !important;
}

// Beautiful Summary Block Image Radius //

.sqs-gallery-design-autocolumns-slide img, .sqs-gallery-design-autogrid-slide .summary-thumbnail {
  border-radius: 10px 10px 0px 0px !important;
}

// Beautiful Summary Content Padding //

.sqs-gallery-design-autocolumns-slide .summary-content, .sqs-gallery-design-autogrid-slide .summary-content {
    padding: 20px 40px 20px 40px;
}

// Beautiful Summary Read More Button //

.sqs-gallery-design-autocolumns-slide .summary-read-more-link, .sqs-gallery-design-autogrid-slide .summary-read-more-link {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(to right, #F07C63, #E45372);
  color: white;
  border: 0px solid white;
  border-radius: 5px;
  padding: 10px 20px;
}

---

Customize

There are a few values you can change:

• Summary Block Design: Adjust the background color, border radius, and drop shadow to your liking.

• Summary Block Image Radius: Adjust the image’s border radius to your liking.

• Summary Content Padding: Change the padding around the text content of the summary block.

• Summary Read More Button: Adjust the margin, background, color, border, border radius, and padding.

• Please keep in mind that this plugin only works with Summary Blocks with a wall or grid layout design.

---