Blog Listing Page
COMPONENT SELECTOR GUIDE
Global Blog Listing Page Elements (Elements Common Among All Layouts)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| body[class*="collection-type-blog"].view-list | This grouping selector will select the body elements for all blog layouts. |
|
| .blog-item | The blog item wrappers. |
|
| .blog-item .image-wrapper img | The blog item images. |
|
| .blog-meta-section | The meta data container. |
|
| .blog-meta-primary | The primary meta date container. |
|
| .blog-meta-secondary | The secondary meta data container. |
|
| .blog-categories-list | The container for categories. |
|
| .blog-categories | Individual category text links. |
|
| .blog-categories--comma | The commas separating the categories. |
|
| .blog-meta-delimiter:after | The delimeter separating the primary and secondary meta data. |
|
| .blog-author | The blog author text. |
|
| .blog-date | The blog date. |
|
| .blog-title | The blog title text. |
|
| .blog-title a | The blog title link. |
|
| .blog-excerpt-wrapper p | The blog excerpt text. |
|
| .blog-more-link | The "Read More" link. |
|
| .blog-more-link:after | The :after pseudo-element of the "Read More" link, which adds the underline to the link. |
|
HTML Structure Explanation
Each blog item is represented with an <article> HTML element. You can see all of the relevant descendant elements highlighted in the below screenshot.
An entire blog entry HTML example with the relevant selectors highlighted.
“Basic Grid Blog” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .collection-type-blog-basic-grid.view-list | The body element for the listing page and the individual blog pages. |
|
| .blog-basic-grid | The grid container for the blog items. |
|
| .blog-basic-grid .blog-item | The blog item wrappers. |
|
| .blog-basic-grid .blog-item .image-wrapper img | The blog item images. |
|
| .blog-basic-grid .blog-article-spacer | The article spacer below the image. |
|
| .blog-basic-grid .blog-basic-grid--text | The container of the blog item text elements. |
|
| .blog-basic-grid .blog-meta-section | The meta data container. |
|
| .blog-basic-grid .blog-meta-primary | The primary meta date container. |
|
| .blog-basic-grid .blog-meta-secondary | The secondary meta data container. |
|
| .blog-basic-grid .blog-categories-list | The container for categories. |
|
| .blog-basic-grid .blog-categories | Individual category text links. |
|
| .blog-basic-grid .blog-categories--comma | The commas separating the categories. |
|
| .blog-basic-grid .blog-meta-delimiter:after | The delimeter separating the primary and secondary meta data. |
|
| .blog-basic-grid .blog-author | The blog author text. |
|
| .blog-basic-grid .blog-date | The blog date. |
|
| .blog-basic-grid .blog-title | The blog title text. |
|
| .blog-basic-grid .blog-title a | The blog title link. |
|
| .blog-basic-grid .blog-excerpt-wrapper p | The blog excerpt text. |
|
| .blog-basic-grid .blog-more-link | The "Read More" link. |
|
| .blog-basic-grid .blog-more-link:after | The :after pseudo-element of the "Read More" link, which adds the underline to the link. |
|
HTML Structure Explanation
Each blog item is represented with an <article> HTML element. You can see all of the relevant descendant elements highlighted in the below screenshot.
An entire blog entry HTML example with the relevant selectors highlighted.
“Single Column Blog” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .collection-type-blog-single-column.view-list | The body element for the listing page and the individual blog pages. |
|
| .blog-single-column | The container for the blog items. |
|
| .blog-single-column .blog-item | The blog item wrappers. |
|
| .blog-single-column .blog-item .image-wrapper img | The blog item images. |
|
| .blog-single-column .blog-article-spacer | The article spacer below the image. |
|
| .blog-single-column .blog-single-column--text | The container of the blog item text elements. |
|
| .blog-single-column .blog-meta-section | The meta data container. |
|
| .blog-single-column .blog-meta-primary | The primary meta date container. |
|
| .blog-single-column .blog-meta-secondary | The secondary meta data container. |
|
| .blog-single-column .blog-categories-list | The container for categories. |
|
| .blog-single-column .blog-categories | Individual category text links. |
|
| .blog-single-column .blog-categories--comma | The commas separating the categories. |
|
| .blog-single-column .blog-meta-delimiter:after | The delimeter separating the primary and secondary meta data. |
|
| .blog-single-column .blog-author | The blog author text. |
|
| .blog-single-column .blog-date | The blog date. |
|
| .blog-single-column .blog-title | The blog title text. |
|
| .blog-single-column .blog-title a | The blog title link. |
|
| .blog-single-column .blog-excerpt-wrapper p | The blog excerpt text. |
|
| .blog-single-column .blog-more-link | The "Read More" link. |
|
| .blog-single-column .blog-more-link:after | The :after pseudo-element of the "Read More" link, which adds the underline to the link. |
|
HTML Structure Explanation
Each blog item is represented with an <article> HTML element. You can see all of the relevant descendant elements highlighted in the below screenshot.
An entire blog entry HTML example with the relevant selectors highlighted.
“Masonry Blog” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .collection-type-blog-masonry.view-list | The body element for the listing page and the individual blog pages. |
|
| .blog-masonry | The container for the blog items. |
|
| .blog-masonry .blog-item | The blog item wrappers. |
|
| .blog-masonry .blog-item .blog-image-wrapper | The blog item image wrapper. |
|
| .blog-masonry .blog-item .image-wrapper img | The blog item images. |
|
| .blog-masonry .blog-item-summary | The container of the blog item text elements. |
|
| .blog-masonry .blog-meta-section | The meta data container. |
|
| .blog-masonry .blog-meta-primary | The primary meta date container. |
|
| .blog-masonry .blog-meta-secondary | The secondary meta data container. |
|
| .blog-masonry .blog-categories-list | The container for categories. |
|
| .blog-masonry .blog-categories | Individual category text links. |
|
| .blog-masonry .blog-categories--comma | The commas separating the categories. |
|
| .blog-masonry .blog-meta-delimiter:after | The delimeter separating the primary and secondary meta data. |
|
| .blog-masonry .blog-author | The blog author text. |
|
| .blog-masonry .blog-date | The blog date. |
|
| .blog-masonry .blog-title | The blog title text. |
|
| .blog-masonry .blog-title a | The blog title link. |
|
| .blog-masonry .blog-excerpt-wrapper p | The blog excerpt text. |
|
| .blog-masonry .blog-more-link | The "Read More" link. |
|
| .blog-masonry .blog-more-link:after | The :after pseudo-element of the "Read More" link, which adds the underline to the link. |
|
HTML Structure Explanation
Each blog item is represented with an <article> HTML element. You can see all of the relevant descendant elements highlighted in the below screenshot.
An entire blog entry HTML example with the relevant selectors highlighted.
“Alternating Side By Side Blog” Layout
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| .collection-type-blog-alternating-side-by-side | The body element for the listing page and the individual blog pages. |
|
| .blog-alternating-side-by-side.view-list | The container for the blog items. |
|
| .blog-alternating-side-by-side .blog-item | The blog item wrappers. |
|
| .blog-alternating-side-by-side .blog-item .blog-image-wrapper | The blog item image wrapper. |
|
| .blog-alternating-side-by-side .blog-item .image-wrapper img | The blog item images. |
|
| .blog-alternating-side-by-side .blog-item-summary | The container of the blog item text elements. |
|
| .blog-alternating-side-by-side .blog-meta-section | The meta data container. |
|
| .blog-alternating-side-by-side .blog-meta-primary | The primary meta date container. |
|
| .blog-alternating-side-by-side .blog-meta-secondary | The secondary meta data container. |
|
| .blog-alternating-side-by-side .blog-categories-list | The container for categories. |
|
| .blog-alternating-side-by-side .blog-categories | Individual category text links. |
|
| .blog-alternating-side-by-side .blog-categories--comma | The commas separating the categories. |
|
| .blog-alternating-side-by-side .blog-meta-delimiter:after | The delimeter separating the primary and secondary meta data. |
|
| .blog-alternating-side-by-side .blog-author | The blog author text. |
|
| .blog-alternating-side-by-side .blog-date | The blog date. |
|
| .blog-alternating-side-by-side .blog-title | The blog title text. |
|
| .blog-alternating-side-by-side .blog-title a | The blog title link. |
|
| .blog-alternating-side-by-side .blog-excerpt-wrapper p | The blog excerpt text. |
|
| .blog-alternating-side-by-side .blog-more-link | The "Read More" link. |
|
| .blog-alternating-side-by-side .blog-more-link:after | The :after pseudo-element of the "Read More" link, which adds the underline to the link. |
|
HTML Structure Explanation
Each blog item is represented with an <article> HTML element. You can see all of the relevant descendant elements highlighted in the below screenshot.
An entire blog entry HTML example with the relevant selectors highlighted.