-
Posts
64,585 -
Joined
-
Last visited
-
Days Won
515
Community Answers
-
tuanphan's post in Hover on Summary Block was marked as the answer
Don't remove any code in your current code. Add this to Custom CSS
.summary-item:hover .summary-content.sqs-gallery-meta-container { opacity: 1 !important; pointer-events: none; } .summary-item .summary-content.sqs-gallery-meta-container { width: 100% !important; }
-
tuanphan's post in Archive block as one line instead of columns was marked as the answer
Add this CSS under
[data-section-id="659a05f45b00f8100273bdf7"] .content-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } .blog-basic-grid.collection-content-wrapper { padding-top: 0px !important; }
-
tuanphan's post in Summary Block in Desktop and Mobile Versions was marked as the answer
Use this
@media screen and (max-width:767px) { .summary-v2-block { display: none !important; } }
-
tuanphan's post in Need to fix Pagination Titles in Blog (Mobile version) was marked as the answer
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS
@media screen and (max-width:767px) { .item-pagination[data-collection-type^="blog"] .item-pagination-title { font-size: 14px !important; } }
-
tuanphan's post in [Share] Squarespace 7.1 CSS ID List was marked as the answer
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
-
tuanphan's post in Can you edit the mobile view without changing the website view? was marked as the answer
See this
https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine
-
tuanphan's post in Site navigation dropdown menu issue (mobile view) was marked as the answer
Change your code to this code
<style> /* hide items on desktop */ nav.header-nav-list>div:nth-child(-n+7) { display: none; } /* hide items on mobile */ [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+7) { display: none; } </style>
-
tuanphan's post in gomaproductions.com was marked as the answer
Yes. You can code it with HTML, then add to Website > Website Tools (under Not Linked) > Code Injection > Lock Screen/Lock Page
and you will need to to use some CSS/JS code to move it to desired position on Lock Page
-
tuanphan's post in Full-width arcgis map formatting was marked as the answer
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS to increase width
.fe-65b1968b881a407ad804001e { --sqs-site-max-width: 100% !important; }
-
tuanphan's post in Change filter close 'x' to text 'see results' on mobile was marked as the answer
Use this code to Website Tools > Custom CSS
@media screen and (max-width:991px) { button.mobile-panel-close:before { content: "SEE RESULTS" !important; transform: unset !important; white-space: nowrap; background: unset !important; display: block; text-align: center; position: static !important; height: auto !important; } button.mobile-panel-close:after { display: none; } .custom-filter-container.use-mobile-panel.custom-filter-uid-0 .mobile-panel-close { width: auto !important; height: auto !important; padding: 10px !important; border: 1px solid black !important; } }
-
tuanphan's post in Lightbox Anything Load Page Javascript was marked as the answer
I guess you should contact sqsptheme support, they can check this problem easier.
--
You can try using Local Method (Markdown Block) to add Accordion, then check again
-
tuanphan's post in Code to increase size of product images on mobile was marked as the answer
See this red note
-
tuanphan's post in Strange set up on page was marked as the answer
Did you solve it? It looks fine to me now
-
tuanphan's post in Remove padding in kadence theme was marked as the answer
Hi,
Can you share link to page where you have problem, we can check easier
-
tuanphan's post in Hidden Prices was marked as the answer
Data-section-id of a specific section is Fixed, it won't change.
To hide Price on a store/category page, you can use this code to Page Header Code Injection
<style> .product-price { display: none !important; } </style>
-
tuanphan's post in Make video background fit on mobile devices was marked as the answer
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS
@media screen and (max-width:991px) { [data-section-id="657cc111d92a2e0132a32c63"] { min-height: unset !important; height: 30vh; margin-top: 5vh; } }
-
tuanphan's post in Moving header nav items on desktop & mobile was marked as the answer
Add this CSS under to enable mobile menu + hide nav
body.header--menu-open .header-menu { opacity: 1 !important; visibility: visible !important; } div.header-nav { visibility: hidden; }
-
tuanphan's post in Match newsletter input fields with contact form input fields was marked as the answer
You can use this code to Website > Website Tools > Custom CSS
div.newsletter-block input { border: 1px solid rgb(169,169,169) !important; background-color: #fafafa !important; color: black !important; } div.newsletter-block input::placeholder { color: black !important; }
-
tuanphan's post in How can I change the colour of the text in all of my lists to 3 different colours ? was marked as the answer
Use this code to Website > Website Tools (under Not Linked) > Custom CSS
/* change list color */ .user-items-list-item-container[data-section-id="65bb95226d34407ab7877411"] { li:nth-child(1) h2 { color: #000 !important; } li:nth-child(2) h2 { color: #f1f !important; } li:nth-child(3) h2 { color: #f1f2f3 !important; }}
-
tuanphan's post in How Can I Set Banner to Lock intrinsic size on homepage - desktop and mobile was marked as the answer
You can use this code to Website > Website Tools (under Not Linked) > Custom CSS
@media screen and (max-width:640px) { body.homepage figure#thumbnail img { width: 100% !important; height: auto !important; left: 0 !important; } body.homepage .banner-thumbnail-wrapper.has-description { padding: 0 !important; height: 150px !important; } }
-
tuanphan's post in Remove horizontal scroll from mobile was marked as the answer
Try adding this code
html, body { overflow-x:hidden; }
-
tuanphan's post in Target Buttons in Digital Products was marked as the answer
Use this CSS code
button.pricing-plan-pricing-option-button { font-family: 'PlusJakartaSansReg' !important; } .pricing-plan-price-billing-period { display: none; }
-
tuanphan's post in Fit all body content on one page and make it responsive was marked as the answer
Use this code to Website > Website Tools (under Not Linked) > Custom CSS
@media screen and (min-width: 992px) { div#block-yui_3_17_2_1_1706788793207_5146 .sqs-gallery-design-stacked { height: 85vh !important; } div#block-yui_3_17_2_1_1706788793207_5146 .sqs-gallery-design-stacked-slide img { width: auto !important; height: 85vh !important; } div#block-yui_3_17_2_1_1706883668238_5442 { display: none; } div#block-yui_3_17_2_1_1706870547985_4501 img { width: 100% !important; height: auto !important; top: unset !important; left: unset !important; } div#page-section-65bb87a3e84cf00f5fa8cfa1 .sqs-col-12 .sqs-col-2:nth-child(2) { height: 85vh !important; display: flex; flex-direction: column; justify-content: space-between; } body#collection-65bb87a3e84cf00f5fa8cf9f { overflow-y: hidden; }}
-
tuanphan's post in Add text to top of Index Page was marked as the answer
Use this code
body#collection-65ba9c2d82e27a520f220005 .main-content:before { content: "Aerial Cinematography \A line 2 line 2 line 2 \A Line 3 line 3 line 3"; display: block; text-align: center; margin-top: 10px; margin-bottom: 30px; font-size: 16px; font-weight: bold; color: grey; white-space: pre-wrap; }
-
tuanphan's post in Trigger image effect via text link was marked as the answer
You try this code to Website Tools > Code Injection > Footer. This code for Bucher item. If it works, I will send guide for other items
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('div#block-ceabdb2d8ce3de1de417 h2').hover(function(){ $('div#block-d027dacb8435a2999640').addClass('hover-img'); }, function(){ $('div#block-d027dacb8435a2999640').removeClass('hover-img'); }); }) </script> <style> .hover-img { filter: grayscale(0); transition: .5s ease-in-out; } </style>