Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 6
tuanphan

[Share] Squarespace 7.1 CSS ID List

Question

Some CSS Class/ID for Squarespace 7.1

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

Checked & Wrote by tuanphan


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

Not sure if this is what @jayciro was asking, but I'm trying to customize my blog posts so some of these elements, like categories, show up in a different place than the default. Since ".blog-meta-item–categories" is the element, is it possible to code this into an HTML block to insert this meta data where I would like? Thanks!

Share this post


Link to post
  • 0
37 minutes ago, Jahhhd said:

Not sure if this is what @jayciro was asking, but I'm trying to customize my blog posts so some of these elements, like categories, show up in a different place than the default. Since ".blog-meta-item–categories" is the element, is it possible to code this into an HTML block to insert this meta data where I would like? Thanks!

Where position you want?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
1 minute ago, tuanphan said:

Where position you want?

Maybe slightly lower, maybe at the bottom of the page. (This code is definitely not correct but) is it possible to add something like the below snippet to a code block and then move that where ever on the page I would like the categories to appear? Thank you!

 

 .blog-meta-item–categories {
  display:block !important; }

 

Share this post


Link to post
  • 0
On 5/27/2020 at 9:19 PM, Jahhhd said:

Maybe slightly lower, maybe at the bottom of the page. (This code is definitely not correct but) is it possible to add something like the below snippet to a code block and then move that where ever on the page I would like the categories to appear? Thank you!

 


 .blog-meta-item–categories {
  display:block !important; }

 

I think you need to use JavaScript to move an elements. You need Business Plan or higher.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
On 5/31/2020 at 8:02 AM, tuanphan said:

I think you need to use JavaScript to move an elements. You need Business Plan or higher.

Ya that shouldn't be a problem. Just not sure what the code needs to be. Thanks!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...