Archive Block

Description

The Archive block is used to organize lists of links to blog posts, events, products, and gallery page images. This can be used to add extra navigation.

!NOTE: Archive blocks are text-only.

The Archive Block can be viewed in 3 different ways:

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>

.sqs-block-archive {
}

</style>

Custom CSS

To target the entire archive block (any layout)

/* any archive block style */
.sqs-block-archive {
}

To target the date

/* archive item date */
.archive-item-date-after {
}
 

Dropdown

To target the entire archive block

/* archive dropdown layout */
.archive-block-setting-layout-dropdown {
}

To target the toggle arrow

/* archive dropdown arrow */
.archive-dropdown-toggle-icon {
}
 

List

To target the entire block

/* archive list layout */
.archive-block-setting-layout-list {
}

To target the group count

/* archive list layout group count */
.archive-block-setting-layout-list .archive-group-count {
}
 

Index

To target the entire index archive block

/* archive index layout */
.archive-block-setting-layout-index {
}

To target the group title

/* archive index layout group title */
.archive-block-setting-layout-index .archive-group-name-link {
}

To target the item title

/* archive index layout item title */
.sqs-block-archive .archive-block-setting-layout-index .archive-item-link {
}

To target the group count

/* archive index layout group count */
.archive-block-setting-layout-index .archive-group-count {
}