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

[Share] Squarespace 7.1 CSS ID List


tuanphan

Question

Recommended Posts

  • 0

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

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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. 

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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 ❣️

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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 

Link to comment
  • 0
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

Link to comment
  • 0
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.

1117841194_ScreenShot2021-07-29at11_17_46AM.thumb.png.9c2a9497155a8bdd2dcbd93058428798.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...