Block Post Individual Listings
COMPONENT SELECTOR GUIDE
Blog Post Content (Title, Metadata, Post Text)
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-item | This grouping selector will select the body elements for all blog post layouts. |
|
| .blog-item-wrapper .entry | The wrapper for all of the blog content. This element is given padding around the content. |
|
| .blog-item-wrapper .blog-item-inner-wrapper | The inner wrapper for all of the blog content. This element is given a "max-width" property based on the blog section width. |
|
| .blog-item-inner-wrapper .blog-item-top-wrapper | The wrapper that contains the blog content at the top of the page, including the title and the meta data |
|
| .blog-item-title | The blog post title container. |
|
| .blog-item-title .entry-title | The blog post title. |
|
| .blog-item-meta-wrapper | The wrapper for the meta data. |
|
| .blog-meta-item.blog-meta-item--categories | The blog categories container. |
|
| .blog-item-category-wrapper .blog-item-category | The individual category text links. |
|
| .blog-item-category-wrapper .blog-item-category:after | The delimiters between the category links. |
|
| .blog-item-author-date-wrapper | The wrapper for the author and date meta data. |
|
| .blog-meta-item.blog-meta-item--date | The date text. |
|
| .blog-meta-item.blog-meta-item--date:after | The delimiter between the date and author. |
|
| .blog-meta-item--author | The blog author text. |
|
| .blog-item-content-wrapper | The wrapper that contains the blog post content, including the paragraphs, headings, images, the author signature, and other elements that might be included in your blog posts (this does not inlude the blog title and meta data). |
|
| .blog-item-content | The wrapper that contains the blog post content, not including the author signature. |
|
| .blog-meta-item.blog-meta-item--tags | The blog tags container at the bottom of the blog post. |
|
| .blog-item-category-wrapper .blog-item-tag-wrapper | The individual tag text links. |
|
| .blog-item-category-wrapper .blog-item-tag-wrapper:after | The delimiters between the tag links. |
|
HTML Structure Explanation
The container for all of the blog containers has the class name “blog-item-wrapper”, and contains all of the blog elements, including the title, meta data wrapper, content, author signature, and more.
The container for all of the blog containers has the class name “blog-item-wrapper”, and contains all of the blog elements, including the title, meta data wrapper, content, author signature, and more.
Unique Blog Posts
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) |
|---|---|---|
| #item-651c7ddb04c84853b00cdd41 | Targets a unique blog post using its ID attribute. The selector in the left column is just the general form of the collection ID, but the characters that come after "#item-" will be different for each element. |
|
HTML Structure Explanation
The <body> HTML element with an id attribute that corresponds to the specific blog collection item.
The <body> HTML element with an id attribute that corresponds to the specific blog collection item.
Blog Post Author Signature
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) |
|---|---|---|
| .blog-item-author-profile-wrapper | The wrapper for all of the author signature elements. |
|
| .author-avatar | The author image container (not the actual image element). |
|
| .author-avatar-image | The author image element. |
|
| .author-name | The author name. |
|
| .blog-item-author-profile-wrapper > a | The top link element containing the author image and the author name. |
|
| .author-bio | The author bio container. |
|
| .author-website | The author website link. |
|
HTML Structure Explanation
The blog author wrapper and all of its descendant elements, including the image, and name, the bio and the website.
The blog author wrapper and all of its descendant elements, including the image, and name, the bio and the website.
Pagination
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) |
|---|---|---|
| General Selectors | ||
| .item-pagination[data-collection-type*="blog"] | The item pagination container on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link | The item pagination link containers on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-title | The item pagination title on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-icon | The container for the SVG vector images on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-icon svg | The SVG vector imagery in each of the item pagination link containers on blog collection pages. |
|
| "Previous" Link Elements | ||
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--prev | The "Previous" item pagination link container on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--prev .item-pagination-icon | The container for the "Previous" SVG vector images on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--prev .item-pagination-icon svg | The SVG vector imagery in the "Previous" item pagination link containers on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--prev .item-pagination-title | The item pagination title for the "Previous" link on blog collection pages. |
|
| "Next" Link Elements | ||
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--next | The "Next" item pagination link container on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--next .item-pagination-icon | The container for the "Next" SVG vector images on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--next .item-pagination-icon svg | The SVG vector imagery in the "Next" item pagination link containers on blog collection pages. |
|
| .item-pagination[data-collection-type*="blog"] .item-pagination-link--next .item-pagination-title | The item pagination title for the "Next" link on blog collection pages. |
|
HTML Structure Explanation
The item pagination container on blog posts and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.
The item pagination container on blog posts and it’s descendant elements. Every collection page will have a similar element to the pictured one below, but the “data-collection-type” attribute will reflect which collection type and layout is being used.