Popular Post tuanphan Posted April 11, 2020 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 Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header 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 First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a 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 Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List Blog List: [class*="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: [class*="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 Blog Grid updating Blog Masonry updating 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 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 Fluid Engine Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine Checked & Wrote by tuanphan Edited November 22, 2022 by tuanphan updated new id zoester300, sehnsuchtstudios, taylorroy and 88 others 44 32 15 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
jayciro Posted May 26, 2020 Share Posted May 26, 2020 Is it possible to add categories? Link to comment
tuanphan Posted May 26, 2020 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.). Answer within 24 hours. Or send to forum message 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
Jahhhd Posted May 27, 2020 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 comment
tuanphan Posted May 27, 2020 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.). Answer within 24 hours. Or send to forum message 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
Jahhhd Posted May 27, 2020 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 comment
tuanphan Posted May 31, 2020 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.). Answer within 24 hours. Or send to forum message 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
Jahhhd Posted June 10, 2020 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 comment
hboileau Posted July 31, 2020 Share Posted July 31, 2020 is there an ID for the login button in the header? Link to comment
tuanphan Posted July 31, 2020 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.). Answer within 24 hours. Or send to forum message 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
hboileau Posted July 31, 2020 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 comment
hboileau Posted July 31, 2020 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 comment
hme164 Posted September 25, 2020 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 comment
Ad7am Posted September 25, 2020 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 sfphotogirl 1 Link to comment
mickeymiscia Posted September 26, 2020 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 comment
tuanphan Posted September 27, 2020 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.). Answer within 24 hours. Or send to forum message 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
Sarah-W Posted October 4, 2020 Share Posted October 4, 2020 Thanks for this list Tuan. Link to comment
Ad7am Posted October 14, 2020 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 comment
tuanphan Posted October 16, 2020 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.). Answer within 24 hours. Or send to forum message 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
Ad7am Posted October 17, 2020 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 comment
kellyhutsbydesigns Posted October 26, 2020 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 comment
kellyhutsbydesigns Posted November 10, 2020 Share Posted November 10, 2020 I've fixed the above! tuanphan 1 Link to comment
tjbarnett Posted January 19, 2021 Share Posted January 19, 2021 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 comment
tuanphan Posted January 19, 2021 Author Share Posted January 19, 2021 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.). Answer within 24 hours. Or send to forum message 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
tjbarnett Posted January 20, 2021 Share Posted January 20, 2021 THAT WORKED THANK YOU SO MUCH !!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment