Summary Blog Collection

Description

Blogs are under collections. They are a great way to share your ideas, thoughts, and stories.

Blogs are categorized into 2 different parts:

Blog summary pages are your blog's landing page. You can display your posts as a list or grid. Clicking on a blog item on your blog page will lead you to its individual blog post.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.BlogItem-title {
}

</style>
 

Custom CSS

7.1 Layouts

To target the different layouts

/* Basic Grid */
.blog-basic-grid {
}

/* Side by Side */
.blog-side-by-side {
}

/* Single Column */
.blog-single-column {
}

/* Masonry */
.blog-masonry {
}

/* Alternating Side by Side */
.blog-alternating-side-by-side {
}

To target the post title

/* Post Title */
.blog-title {
}

To target the post date

/* Post Date */
.blog-date {
}

To target the excerpt

/* Excerpt */
.blog-excerpt {
}

To target the read more link

/* Read More Link */
.blog-more-link {
}

/* Read More Link Underline */
.blog-more-link::after {
}

To target the meta data

/* All Meta Data */
.blog-meta-section {
}

/* Meta Data – Primary Only */
.blog-meta-primary {
}

/* Meta Data – Secondary Only */
.blog-meta-secondary {
}

To target the categories

/* Categories */
.blog-categories-list {
}

To target the author’s name

/* Author Bio – Name */
.blog-author {
}

To target the image container

/* Blog Thumbnail Image Container */
.blog-side-by-side .image-wrapper {
}

To target the image

/* Blog Thumbnail Image */
.blog-side-by-side .image-wrapper img {
}

7.0 Brine Template

To target the title

/* title */
.BlogItem-title {
}

To target the thumbnail image

/* thumbnail image */
.BlogList-item-image {
}

To target the author’s name

/* author name */
.Blog-meta-item--author {
}

To target the date

/* date */
.Blog-meta-item--date {
}

To target the excerpt

/* excerpt */
.BlogList-item-excerpt {
}

To target the read more link

/* read more */
.BlogList-item-readmore {
}