Buy me a coffee

Squarespace 7.1 CSS Class/ID List

In this post, I will share some CSS Class/ID in Squarespace 7.1

Notes

Header

  • Header: header#header
  • Site Title: a#site-title
  • Navigation: .header-nav
  • Navigation Items: .header-nav-item a
  • Navigation Dropdown: .header-nav-folder-content
  • Navigation Dropdown Items: .header-nav-folder-item a
  • Mobile Navigation Items: .header-menu-nav-item a
  • Mobile Menu Icon: .header-burger
  • Mobile Menu X icon: .burger–active
  • Header Social Icons: .header-actions .icon
  • Cart Icon: header#header span.Cart-inner
  • Cart quantity: header#header .icon-cart-quantity

Footer

  • Footer: footer#footer-sections
  • Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer
  • Footer Links: footer#footer-sections a

Product List

  • Product List: .collection-type-products.view-list
  • Product Name: .grid-title
  • Product Price: .grid-prices
  • Product Image: figure.grid-image
  • Product Currency: body.native-currency-code-usd .sqs-money-native:before
  • Sold Out Text: .product-mark.sold-out

Product Detail

  • Product Detail: .collection-type-products.view-item
  • Product Breadcrumb: .ProductItem-nav-breadcrumb
  • Product Pagination (Previous/Next): .ProductItem-nav-pagination
  • Gallery: figure.ProductItem-gallery
  • Thumbnails: .ProductItem-gallery-thumbnails
  • Big Image: .ProductItem-gallery-slides
  • Product Name: h1.ProductItem-details-title
  • Price: .ProductItem-product-price
  • Currency: body.native-currency-code-usd .sqs-money-native:before
  • Excerpt: .ProductItem-details-excerpt
  • Add to Cart Button: .sqs-add-to-cart-button-wrapper
  • Add to Cart Text: .sqs-add-to-cart-button-inner
  • Variant Dropdown: .variant-option
  • Variant Title: .variant-option-title
  • Variant Options: .variant-select-wrapper option
  • Quantity Text: .quantity-label
  • Quantity Input: .product-quantity-input

Cart Page

  • Cart Page: body#cart
  • Cart Title: .cart-title
  • Item: .CartTable-itemLabel-3zzV1
  • QTY. .CartTable-itemLabel-3zzV1 span
  • Price Name: .CartTable-itemPrice-XgjsO span
  • X icon: .item-remove div
  • Product Thumbnail: .item-image
  • Product Name: .CartTableRow-itemTitle-1MDgZ a
  • Quantity input: .CartTableRow-itemQuantity-LwuRx.item-quantity
  • Price: .CartTableRow-itemPrice-26eXS.item-price
  • Subtotal: .CartTable-subtotal-2nJjm
  • Subtotal Price: span.CartTable-subtotalPrice-2JFeD
  • Checkout: .CartFooter-checkout-28MW2.checkout
  • Checkout Text: .CartFooter-checkout-28MW2.checkout span
  • Variant Text: .CartTableRow-variant-1ihcF.variant

Blog List

  • Blog List: .collection-type-blog.view-list
  • Thumbnails: article.blog-item img
  • Date: time.blog-date
  • Category: span.blog-categories-list
  • Title: h1.blog-title
  • Excerpt: .blog-excerpt
  • Read more: a.blog-more-link

Blog Posts

  • Blog Posts Page: .collection-type-blog.view-item
  • Blog Items: .blog-item-entry
  • Categories: .blog-meta-item–categories
  • Date: time.dt-published.blog-meta-item.blog-meta-item–date
  • Author: .blog-meta-item.blog-meta-item–author.p-author.author
  • Title: .blog-item-title
  • Content: .blog-item-content-wrapper
  • Pagination: .item-pagination
  • Pagination Arrows: .item-pagination-link .item-pagination-icon
  • Pagination Title: h2.item-pagination-title
  • Author Box: .blog-item-author-profile-wrapper
  • Author Image: a.author-avatar.content-fill
  • Author Name: .author-name
  • Author Site: a.author-website
  • Post Comment: .squarespace-comments
  • Post Comment Button: .comment.btn
  • Comment Input: .squarespace-comments .new-comment-area
  • Preview: span.btn-text.preview-comment.top-level-preview-btn
  • Subscribe via email text: span.subscribe.subscribe-control

Event List Page

  • Event List Page: .collection-type-events.view-list
  • Event Thumbnail: a.eventlist-column-thumbnail.content-fill
  • Event Time: .eventlist-datetag
  • Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day
  • Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month
  • Event Title: h1.eventlist-title
  • Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item
  • Event Description: .eventlist-description

Event Detail Page

  • Event Detail Page: .collection-type-events.view-item
  • Event Title: h1.eventitem-title
  • Event Date: time.event-date
  • Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item
  • Event Description: .eventitem-column-content
  • Event Pagination: section.item-pagination.item-pagination–prev-next
  • Previous/Next: .item-pagination-link .item-pagination-prev-next
  • Event Pagination Title: h2.item-pagination-title

Portfolio

  • title: h3.portfolio-title
  • item: .portfolio-grid-basic
  • portfolio image: .portfolio-grid-basic .grid-image
  • pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination
  • pagination text: h2.item-pagination-title
  • pre text: .item-pagination-link–prev .item-pagination-prev-next
  • next text: .item-pagination-link–next .item-pagination-prev-next

Other

  • Paragraph 1. p.sqsrte-large
  • Paragraph 2. p
  • Paragraph 3. p.sqsrte-small

10 thoughts on “Squarespace 7.1 CSS Class/ID List”

  1. Hi there – this seems like if should be really useful – thank you. However, I cannot amend the font size of the title of a blog post on the post’s page itself. I am trying to use the following. If you have any advice would be grateful.

    h1.blog-item-title a {
    font-size: 30px;
    font-weight: 900 !important;
    }

    Reply
    • Hi. Blog title doesn’t use h1.blog-item-title a
      It uses .blog-item-title h1.entry-title
      Next time you can send to contact form (float bar at the top) to get faster answer.
      I only check comments once on the weekends.

      Reply
  2. Hi Tuan, this is an amazing list -might you be able to help with the selector for the Instagram thumbnails? Im trying to create a thin white border around each thumbnail and cannot find how to do this, only for the border around the entire block. Many thanks!

    Reply

Leave a Reply to derrick Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder