-
Posts
74 -
Joined
-
Last visited
Reputation Activity
-
whereisscott reacted to tuanphan in Stack Image over Text in List Summary Block on Tablet
Add this code to Website > Website Tools > Custom CSS > then save & reload the page
/* Tablet summary */ @media screen and (min-width:768px) and (max-width:1024px) { div#block-c52af944a800cbb43140 .summary-item { flex-direction: column !important; } }
-
whereisscott reacted to paul2009 in Focal Point Snap-To-Center
Indeed! As a Circle Member, please vote for this.
-
whereisscott reacted to Web_Solutions in Removing automatic line breaks in Image Poster title
Add this code. You can increases the gap by changing the value 5px to 6px or 7px or 8px or whatever you want.
.image-block.sqs-block-image .image-title.sqs-dynamic-text { line-height: 5px !important; }
-
whereisscott got a reaction from tuanphan in How to move primary meta data (categories) below blog title
Yes, This fixed it - Can't thank you enough, @tuanphan!
-
whereisscott reacted to tuanphan in How to move primary meta data (categories) below blog title
Use this CSS code, you can adjust number in the code to change positions of 3 elements
.blog-basic-grid--text { display: flex; flex-direction: column; } .blog-excerpt { order: 1 !important; } .blog-title { order: 2 !important; } .blog-meta-section { order: 3 !important; }
-
whereisscott got a reaction from tuanphan in Make first image in Image Gallery Block go full width
Thanks so much @tuanphan! Yes, I'm using the same grid settings for each page, so this works beautifully. Can't thank you enough!
-
whereisscott got a reaction from creedon in Change separating delimiter in blog post to comma
Worked like a charm @creedon - thank you!! Much appreciated!
-
whereisscott got a reaction from HadiAlexandre in Sending Description Text in Form Email
Hi all,
I recently created an agreement form for a client where the agreement text is being housed in the description field. I noticed, however, that when the form is completed all of that information in the description field isn't sent in the email.
This text is important to send within the email as it states what the client is agreeing to. Does anyone know if there is a workaround for this? (It's quite a bit of text and is several paragraphs long, so it's not something I can place in the label area, unfortunately.
Thanks for your time!
-
whereisscott got a reaction from tuanphan in Add Section above Navigation Bar
Hi @tuanphan
Yes, I was able to do this - here's the code. It would only work for a single page since this targets only the section that would be on the homepage right now, but it's good to know how I'd do this. (I've since created a workaround that includes the text the client wanted to be on the navigation bar). Here's the code, though:
#header {
position: absolute;
top: 340px; /* This value determines the distance from the top of the page */
left: 0;
}
section[data-section-id="NUM] {
position: absolute;
bottom: 190px; /* This value determines the distance from the top of the page */
left: 0;
}
-
whereisscott reacted to paul2009 in Focal Point Snap-To-Center
This is due to a deliberate design choice by Squarespace in mid 2021 and is not a bug.
The focal point behaviour was intentionally changed ("to make it easier to centre"!) and this now prevents us moving it just a small distance from the centre.
There isn't anything you can do to change this behaviour. The only workaround is to use the image editor to crop part of the image so the focal point is where you need it - which is ironic because the focal point exists to avoid having to do this! 🤯
I encourage you to contact Squarespace Customer Care to request that this feature be reinstated. Nothing will happen quickly (I already voiced my concerns in Sept 2021 and nothing has happened since) but at least it will help the product teams to understand the impact these poor design choices have on user experience.
Did this help to explain? Please give feedback by clicking an icon below ⬇️
-
whereisscott reacted to juliaprather in Focal Point Snap-To-Center
Just pled my case with customer care. Be gone, snap-to-center!
-
-
-
whereisscott got a reaction from Ziggy in All-Caps on Navigation Folder Item in Mobile
Thank you! That fixed it - completely forgot I had that code in there. Much appreciated.
-
whereisscott got a reaction from tuanphan in Image Hover Code Stopped Working
@manuschuster I figured it out - feel free to use the code below if you're using a fluid engine section. This should work -
#BLOCK-NUMBER-HERE
{.design-layout-fluid img {
transform: scale(1) !important;
transition: all ease-in-out 1s !important;
}}
#BLOCK-NUMBER-HERE {
.design-layout-fluid:hover img {
transform: scale(1.1) !important;
transition: all ease-in-out 1s !important;
}}
-
whereisscott reacted to sonoferikdesign in Adding text to a fullscreen slideshow on Ver 7.1
Dear Squarespace team,
Full-width sliding images with the ability to place the same or different text and buttons on each image is absolutely a feature we need. I get this request on literally almost every site I build.
I believe it is a feature that would get used millions of times over. I love what you have built and the more I get used to 7.1, I can see it's advantages. Adding this feature would make 7.1 an absolute no-brainer. Please acknowledge our collective desire to have this implemented as soon as possible.
Thank you for all you do!
-
whereisscott got a reaction from Beyondspace in Drop down menu with Navigation Line
@bangank36That did it, thank you! I initially used padding instead of margin to try to get the same effect but margin didn't cause the de-select problem I was having, so this is great. Thanks again!
-
whereisscott reacted to tuanphan in Typewriter & delete effect? TypeIt or something similar
Add to Design > Custom CSS
/* Mobile typewriter */ @media screen and (max-width:767px) { span.txt-type { display: block; } }
-
whereisscott reacted to tuanphan in Force ipad into two-column layout
Add to Design > Custom CSS
/* Homepage-Tablet-2columns */ @media screen and (max-width:1024px) and (min-width:768px) { div#page-section-617842b2b7108941f46ea0cd .span-6 { width: 100%; } div#page-section-617842b2b7108941f46ea0cd .span-6 ~ .span-3 { width: 50%; } }
-
whereisscott reacted to tuanphan in Move navigation links to right side in header
Ah sorry, misread your question.
Add this to Design > Custom CSS to move nav to right side
/* Move Nav to right side of header */ @media screen and (min-width:992px) { .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex-direction: row-reverse; flex: 100% !important; width: 100%; } .header-nav { text-align: right; } .header-layout-branding-center .header-title { text-align: right; width: 67% !important; flex: 1 1 67% !important; } }
-
whereisscott reacted to tuanphan in Moving Mobile Arrows on Carousel Auto-Layout Section
Try adding to Design > Custom CSS
/* Carousel auto arrows */ @media screen and (max-width:767px) { .user-items-list-carousel .desktop-arrows { display: flex !important; margin-right: 0 !important; margin-left: 0 !important; } .mobile-arrows { display: none !important; } }
-
whereisscott reacted to tuanphan in [Share] Squarespace 7.1 CSS ID List
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