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

[Share] Squarespace 7.1 CSS ID List


tuanphan

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 Navigati

Do you still need help on this?

I've fixed the above!  

Posted Images

21 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!

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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; }

 

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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!

Link to post
  • 0
4 hours ago, tuanphan said:

Can you share link to your site? I can check login button id..

hey! I actually figured it out I used this to change colors on a hover

.user-accounts-link.header-nav-item--collection a:hover {
   color: #B26967 !important;

Link to post
  • 0
On 4/12/2020 at 2:50 AM, tuanphan said:

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

Checked & Wrote by tuanphan

That is just great! Thank you!

I was wondering how can I target the content of a blog to create a border around? I tried different variations but with no luck

Edited by hme164
Link to post
  • 0

Thanks for posting this list, Tuanphan.

For gallery lightboxes, I've found the following IDs: 

  • .gallery-lightbox-wrapper
  • .gallery-lightbox-item-wrapper
  • .gallery-lightbox-item
  • .gallery-lightbox-list
  • .gallery-lightbox-item-src
  • .gallery-lightbox-item-img

I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code:

.gallery-lightbox-item {
  height: auto !important;

}

.gallery-lightbox-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
} 

It works, with one issue: The scroll bar is outside the <Next> arrow.

I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work.

Any ideas to solve this?

Thanks in advance.

Edited by Ad7am
Link to post
  • 0
11 hours ago, mickeymiscia said:

i want to remove my Quantity, Add to Cart. Could someone give me a code that I can copy past in my Header Code Injection. I don't have a lot of knowledge.

Add to Home > Design > Custom CSS

.product-quantity-input {
    display: none !important;
}
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

 

On 9/26/2020 at 1:09 AM, Ad7am said:

Thanks for posting this list, Tuanphan.

For gallery lightboxes, I've found the following IDs: 

  • .gallery-lightbox-wrapper
  • .gallery-lightbox-item-wrapper
  • .gallery-lightbox-item
  • .gallery-lightbox-list
  • .gallery-lightbox-item-src
  • .gallery-lightbox-item-img

I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code:


.gallery-lightbox-item {
  height: auto !important;

}

.gallery-lightbox-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
} 

It works, with one issue: The scroll bar is outside the <Next> arrow.

I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work.

Any ideas to solve this?

Thanks in advance.

Can you share link to gallery?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS:

.gallery-lightbox-item[data-active='true'] {
  height: auto !important;
}

.gallery-lightbox-list {
  overflow-x: hidden;
  overflow-y: auto !important;
  z-index: 100;
} 

That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be.

HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop.

Anyone have a solution for this, please? 

Link to post
  • 0
On 10/14/2020 at 10:33 AM, Ad7am said:

Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS:


.gallery-lightbox-item[data-active='true'] {
  height: auto !important;
}

.gallery-lightbox-list {
  overflow-x: hidden;
  overflow-y: auto !important;
  z-index: 100;
} 

That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be.

HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop.

Anyone have a solution for this, please? 

Do you still need help on this?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
16 hours ago, tuanphan said:

Do you still need help on this?

Thanks for asking, Tuan. I emailed you, and will do so again.

Nope, on mobile I still can't get the long images to show in the lightbox at full width without cutting off at the bottom — there's no scrollbar. It seems “overflow-y: auto !important;” is being overruled somewhere.

Link to post
  • 0

Hi @tuanphan

Firstly - thank you so much, this is really helpful as always!

Do you know if I can differentiate between the individual pages in a portfolio and the main portfolio 'landing' page which displays the thumbnail images for each portfolio item?

I have added the sidebar from SQSthemes to a portfolio collection, but I don't want it to display on the main portfolio page - just the individual portfolio items. I have the option to omit certain page IDs in the sidebar code, but I can't seem to target that main page only. I want to avoid listing all of the individual portfolio items in the 'allowed' list as there will be lots of them, but there will only be five main portfolio pages in the 'not allowed' list. If that makes sense?!

Site is https://dev-bcco.squarespace.com/ pward: bcco

The page I'm currently working on is: BLINDS > Roller Blinds

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...