In this post, I will share some CSS Class/ID in Squarespace 7.1
Notes
- Send me a message (free) if you have any questions/the code doesn’t work.
In this post
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
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;
}
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.
Very helpful! Thank you very much!
Hi Tuan Phan, any chance you can do the same code for the ’email newsletter sign up’ section on 7.1? Would be awesome, thanks!
Sent to your email!
Brilliant.
Hi, do you have a similar list like this, but for Squarespace 7.0? I am using the Wells template.
Thanks!
I added your suggestion to mind. Will release this soon! (Hopefully in May)
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!
Hi. It is div.instagram-block .slide
Demo: https://thung.squarespace.com/instagram01?noredirect
Pass: abc