tuanphan 9,590 Popular Post Share Posted April 11, 2020 (edited) 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 Edited March 24 by tuanphan updated some class sendmaddie, breapersing, doverkohl and 53 others 28 18 10 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
1 tuanphan 9,590 Author Share Posted January 19 2 hours ago, tjbarnett said: Hey, I was wondering if it is possible to create a list out of my navigation items in CSS. I want to create a list so I could customize each look of the navigation with custom CSS. I am using version 7.1. Use this .header-nav-item:nth-child(1) a .header-nav-item:nth-child(2) a .header-nav-item:nth-child(3) a ... Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 tuanphan 9,590 Author Share Posted May 26, 2020 46 minutes ago, jayciro said: Is it possible to add categories? What do you mean? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Jahhhd 2 Share Posted May 27, 2020 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 tuanphan 9,590 Author Share Posted May 27, 2020 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? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Jahhhd 2 Share Posted May 27, 2020 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 tuanphan 9,590 Author Share Posted May 31, 2020 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. Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Jahhhd 2 Share Posted June 10, 2020 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 hboileau 0 Share Posted July 31, 2020 is there an ID for the login button in the header? Link to post
0 tuanphan 9,590 Author Share Posted July 31, 2020 2 minutes ago, hboileau said: is there an ID for the login button in the header? Can you share link to your site? I can check login button id.. Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 hboileau 0 Share Posted July 31, 2020 2 hours ago, tuanphan said: Can you share link to your site? I can check login button id.. embersoultarot.com password: hisoka thank you!! Link to post
0 hboileau 0 Share Posted July 31, 2020 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 hme164 0 Share Posted September 25, 2020 (edited) 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 September 25, 2020 by hme164 Link to post
0 Ad7am 4 Share Posted September 25, 2020 (edited) 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 September 25, 2020 by Ad7am Link to post
0 mickeymiscia 0 Share Posted September 26, 2020 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. Link to post
0 tuanphan 9,590 Author Share Posted September 27, 2020 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? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Ad7am 4 Share Posted October 14, 2020 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 tuanphan 9,590 Author Share Posted October 16, 2020 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? Ad7am 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 Ad7am 4 Share Posted October 17, 2020 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 kellyhutsbydesigns 46 Share Posted October 26, 2020 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
0 tjbarnett 3 Share Posted January 19 Hey, I was wondering if it is possible to create a list out of my navigation items in CSS. I want to create a list so I could customize each look of the navigation with custom CSS. I am using version 7.1. Link to post
Question
tuanphan 9,590
Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Header
Footer
Product List
Product Detail
Cart Page
Blog List
Blog Posts
Event List Page
Event Detail Page
Portfolio
Checked & Wrote by tuanphan
Edited by tuanphanupdated some class
Email me if you have need any help (free, of course :-D). Answer within 24 hours.
How to:
-- Yup!
Link to post
Top Posters For This Question
10
3
3
3
Popular Days
Jul 31
4
May 27
3
Mar 24
2
May 26
2
Top Posters For This Question
tuanphan 10 posts
Jahhhd 3 posts
hboileau 3 posts
Ad7am 3 posts
Popular Days
Jul 31 2020
4 posts
May 27 2020
3 posts
Mar 24 2021
2 posts
May 26 2020
2 posts
Popular Posts
tuanphan
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 ba
tuanphan
Do you still need help on this?
kellyhutsbydesigns
I've fixed the above!
Posted Images
28 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment