Summary Block 01

Click to view demo

Password: abc

How to

1. Add Summary Block

Metadata Position: Above Title
Display: Show Title, Show Thumbnail, Show Excerpt
Primary Metadata: Date Posted
Secondary Metadata: Author

2. Add Code

One Page

If you only want the code to affect the summary block on a specific page, add code to

Page Settings > Advanced > Header
or edit page > Insert Code Block > Paste code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* hide dot after date */
  time:after {
    visibility: hidden;
}
/* date icon */
time.summary-metadata-item:before {
    content: '\f073';
    font-family: FontAwesome;
    padding-right: 5px;
}
/* text */
.summary-content {
    background-color: #fff;
    padding: 2em;
    padding-bottom: 12px;
}
/* image */
.summary-thumbnail-outer-container {
    position: relative;
    background-color: #fff;
}
a.summary-thumbnail-container.sqs-gallery-image-container {
    margin-bottom: 0 !important;
}
/* Author icon */
.summary-metadata-item--author a:before {
    content: '\f007';
    font-family: FontAwesome;
  padding-right: 5px;
}
</style>

Entire Site

Add code to Home > Design > Custom CSS

/* hide dot after date */
  time:after {
    visibility: hidden;
}
/* date icon */
time.summary-metadata-item:before {
    content: '\f073';
    font-family: FontAwesome;
    padding-right: 5px;
}
/* text */
.summary-content {
    background-color: #fff;
    padding: 2em;
    padding-bottom: 12px;
}
/* image */
.summary-thumbnail-outer-container {
    position: relative;
    background-color: #fff;
}
a.summary-thumbnail-container.sqs-gallery-image-container {
    margin-bottom: 0 !important;
}
/* Author icon */
.summary-metadata-item--author a:before {
    content: '\f007';
    font-family: FontAwesome;
  padding-right: 5px;
}

and add this to Home > Settings > Advanced > Code Injection > Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

3. Customize

to change text background, edit background-color: #fff;

/* text */
.summary-content {
    text-align: left;
    background-color: #fff;
    padding: 2em;
    padding-bottom: 12px;
}

sqshero