[Share] Squarespace 7.1 CSS ID List

This is such a great reference! Thanks so much!

Howdy @tuanphan 

First and foremost - thank you so much, this is truly useful as usual! 

Can you say whether I can separate between the individual pages in a portfolio and the primary portfolio 'presentation page' which shows the thumbnail pictures for every portfolio thing? 

I have added the sidebar from SQSthemes to a portfolio assortment, however I don't need it to show on the fundamental portfolio page - simply the individual portfolio things. I have the alternative to discard certain page IDs in the sidebar code, however I can't focus on that principle page as it were. I need to try not to list the entirety of the individual portfolio things in the 'permitted' list as there will be loads of them, however there might be five fundamental portfolio pages in the 'not permitted' list. In the event that that bodes well?! 

Site is https://completedraincare.co.uk/ pward: bcco 

The page I'm at present dealing with is: BLINDS > Roller Blinds

On 3/21/2021 at 7:12 PM, CihajJoe said:

Howdy @tuanphan 

First and foremost - thank you so much, this is truly useful as usual! 

Can you say whether I can separate between the individual pages in a portfolio and the primary portfolio 'presentation page' which shows the thumbnail pictures for every portfolio thing? 

I have added the sidebar from SQSthemes to a portfolio assortment, however I don't need it to show on the fundamental portfolio page - simply the individual portfolio things. I have the alternative to discard certain page IDs in the sidebar code, however I can't focus on that principle page as it were. I need to try not to list the entirety of the individual portfolio things in the 'permitted' list as there will be loads of them, however there might be five fundamental portfolio pages in the 'not permitted' list. In the event that that bodes well?! 

Site is https://completedraincare.co.uk/ pward: bcco 

The page I'm at present dealing with is: BLINDS > Roller Blinds

Hi. Sorry for the delay. Do you still need help?

Updated some tags

• Announcement bar
• Sticky Header
• Not Sticky Header
• Site Title when overlay menu open/close
• ...

On 4/11/2020 at 6:50 PM, tuanphan said:

Some CSS Class/ID for Squarespace 7.1

Announcement Bar

• Announcement bar: .sqs-announcement-bar-dropzone
• Announcement bar text: .sqs-announcement-bar-dropzone p
• Announcement bar link: .sqs-announcement-bar-dropzone a

Header

• Header: header#header
• Sticky Header: header.shrink
• Header (not include sticky header): header#header:not(.shrink)
• Site Title: a#site-title
• Site Title (when overlay menu open): .header--menu-open a#site-title
• Site Title (when overlay menu close) body:not(.header--menu-open) 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 Burger 3 lines: .burger-inner>div
• 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

How would I make the header social links into circles rather than the regular icons in 7.1?

Also, is there any way to add a tagline in 7.1? So annoying that they took that option away.

7 hours ago, ashleemundywebsitede said:

How would I make the header social links into circles rather than the regular icons in 7.1?

Also, is there any way to add a tagline in 7.1? So annoying that they took that option away.

Can you share link to your site? We can check & give code easier

This a great reference, thank you, tuanphan. 

Are you planning on adding classes and ID's for the new list sections that are in beta? I'd love to be able to replace the photos with svgs, but I haven't figured it out yet. 

17 hours ago, polizzi said:

This a great reference, thank you, tuanphan. 

Are you planning on adding classes and ID's for the new list sections that are in beta? I'd love to be able to replace the photos with svgs, but I haven't figured it out yet. 

Yes. But perhaps next month, temporarily overloaded.

On 6/23/2021 at 9:29 PM, polizzi said:

This a great reference, thank you, tuanphan. 

Are you planning on adding classes and ID's for the new list sections that are in beta? I'd love to be able to replace the photos with svgs, but I haven't figured it out yet. 

I will update code in this week ❣️

Hi everyone 

Thanks for all the previous Infos that are also useful to me.

I am having a problem though with the folders all being in the same div id as far as I figured it out. 

I created a multilingual site with hidden elements (other languages) on different pages. It works great apart from on mobiles and tablets. After looking at the id's within Google developer console, I saw that the folder itself is a separate id that is the same across the website. 

Example: if I choose to hide the nth-child 2 which is the folder with sub-pages in English , it hides all the other sub-pages which are in folders of German and Spanish. The folder name in German for example, shows ok in the nav menu, but the subpage are hidden as the div id is still nth- child 2. 

In Google console, if I choose - display:block , it will show the subpages of other languages, but also it brings back the Folder and it's contents in English. 

Any way of showing the subpages as separate id within the folder? Does that make sense? 

Here is the site: www.photoadventures.ch 

Please use a tablet or mobile to see what i mean. 

Go to English, click on the second navigation tab and you'll see 2 links + the back button.

Then

Go to German, click on the second navigation tab and you'll see no links and no back button. 

Any help is much appreciated. 🙂

Daniel 

5 hours ago, photoadventures_ch said:

Hi everyone 

Thanks for all the previous Infos that are also useful to me.

I am having a problem though with the folders all being in the same div id as far as I figured it out. 

I created a multilingual site with hidden elements (other languages) on different pages. It works great apart from on mobiles and tablets. After looking at the id's within Google developer console, I saw that the folder itself is a separate id that is the same across the website. 

Example: if I choose to hide the nth-child 2 which is the folder with sub-pages in English , it hides all the other sub-pages which are in folders of German and Spanish. The folder name in German for example, shows ok in the nav menu, but the subpage are hidden as the div id is still nth- child 2. 

In Google console, if I choose - display:block , it will show the subpages of other languages, but also it brings back the Folder and it's contents in English. 

Any way of showing the subpages as separate id within the folder? Does that make sense? 

Here is the site: www.photoadventures.ch 

Please use a tablet or mobile to see what i mean. 

Go to English, click on the second navigation tab and you'll see 2 links + the back button.

Then

Go to German, click on the second navigation tab and you'll see no links and no back button. 

Any help is much appreciated. 🙂

Daniel 

So, I managed to make it work, but only by creating additional pages and then hiding them correspondingly based on Mobile/Pad or Desktop view.

If anyone has an idea for a fix based on folders and the pages inside, it will make things much easier 🙂

Greetings

Daniel

On 7/29/2021 at 4:03 AM, photoadventures_ch said:

Go to German, click on the second navigation tab and you'll see no links and no back button. 

I saw no sub-menu for the second item. So I was unable to test.

There are several ways you might go about this.

Each page has its own id. So you could build up selectors based on those. Pretty painful though as each one would have to be maintained manually.

Without going deeper into the issue and off the top of my head I might be tempted to use Javascript to check the URL of the page and add a class to an element that I could then use for CSS rule sets.

Hi Tuan, do you have an updated class list to include Squarespace 7.1 Auto-Layouts? e.g. their 'simple list' option. I would like to edit the title & body copy. Thanks!

10 hours ago, MarketingFounderMade said:

Hi Tuan, do you have an updated class list to include Squarespace 7.1 Auto-Layouts? e.g. their 'simple list' option. I would like to edit the title & body copy. Thanks!

Hi. Just updated. You can check first post, or below list

List Simple

• List Simple: .user-items-list-simple
• Image: .user-items-list-simple img
• First Item: .user-items-list-simple li:nth-child(1)
• Second Item: .user-items-list-simple li:nth-child(2)
• List Content: .user-items-list-simple .list-item-content
• Title: .user-items-list-simple h2.list-item-content__title
• Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p

List Slideshow

• List Slideshow: .user-items-list-banner-slideshow
• Image: .user-items-list-banner-slideshow img
• First Item: .user-items-list-banner-slideshow li:nth-child(1)
• Second Item: .user-items-list-banner-slideshow li:nth-child(2)
• List Content: .user-items-list-banner-slideshow .slide-content
• Title: .user-items-list-banner-slideshow h2.list-item-content__title
• Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p
• Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button
• Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg
• Button: .user-items-list-banner-slideshow .list-item-content__button

List Carousel

• List Carousel: .user-items-list-carousel__slides
• Image: .user-items-list-carousel__slides img
• First Item: .user-items-list-carousel__slides li:nth-child(1)
• Second Item: .user-items-list-carousel__slides li:nth-child(2)
• List Content: .user-items-list-carousel__slides .list-item-content
• Title: .user-items-list-carousel__slides h2.list-item-content__title
• Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p
• Arrow Circles: .user-items-list-carousel__arrow-button
• Arrow Icons: .user-items-list-carousel__arrow-button svg
• Button: .user-items-list-carousel__slides .list-item-content__button

Amazing - thank you!

and for different product category pages 

On 12/2/2021 at 12:09 AM, Lalat said:

and for different product category pages 

Hi. Product Category Pages use same ids. To target specific category page, you will need to use JavaScript. Script will add a specific class to category page, then you can assign different code.

What are the IDs for squarespace' built in animations? For if I wanted to apply them to some text / images styled within a codeblock.

Hello!
Does anyone by any chance have a list of CSS classes for pages?

body.view-item to target blog entries
body.collection-type-products to target products in the shop

But I am in need of classes for other pages 🙂

8 hours ago, Iryna505 said:

Does anyone by any chance have a list of CSS classes for pages?

There have been some partial list created to address certain feature of SS but no master list.

This following is just general knowledge for folks who are interested.

The issue is that there are probably thousands and thousands of selectors. SS isn't going to produce a list for us and describe in a user friendly way what each of them is for. Plus it would be changing very frequently. I'd guess even multiple times per day. The scope here is massive! Then throw in that fact that the selectors they list may not get you the effect you want.

Your best bet is to figure out the effect you want to create then go after/create the CSS you need. This involves using your browser's developer tools to examine the logic of the elements you are trying to change. I usually try to replicate selectors that SS has created when possible and then go custom when needed.

Alternately you can describe the effect you want and post it here in the forum. Someone may be able to provide some help. Hiring a consultant is another option.

On 4/14/2022 at 9:36 PM, creedon said:

There have been some partial list created to address certain feature of SS but no master list.

This following is just general knowledge for folks who are interested.

The issue is that there are probably thousands and thousands of selectors. SS isn't going to produce a list for us and describe in a user friendly way what each of them is for. Plus it would be changing very frequently. I'd guess even multiple times per day. The scope here is massive! Then throw in that fact that the selectors they list may not get you the effect you want.

Your best bet is to figure out the effect you want to create then go after/create the CSS you need. This involves using your browser's developer tools to examine the logic of the elements you are trying to change. I usually try to replicate selectors that SS has created when possible and then go custom when needed.

Alternately you can describe the effect you want and post it here in the forum. Someone may be able to provide some help. Hiring a consultant is another option.

Thank you for the explanation!

Is it possible to have different color text in each of list item?    .list-item-content__description{color:???}  changes the color for all items.  Is there a way to target and change text color in a single list item?

Thanks 

1 hour ago, Mynty said:

Is it possible to have different color text in each of list item?    .list-item-content__description{color:???}  changes the color for all items.  Is there a way to target and change text color in a single list item?

Thanks 

try li:nth-child(1) .list-item-content__description {}

with 1 is order of item

or li:nth-child(2), li:nth-child(3),...

3 hours ago, tuanphan said:

try li:nth-child(1) .list-item-content__description {}

with 1 is order of item

or li:nth-child(2), li:nth-child(3),...

Yes!!  Thank you!  I appreciate your help very much.

Has this list been affected by the switch to Fluid Engine? Would love to see an updated list! This is so helpful!