watts-creative

My apologies @creedon. I saw that and pasted it into my CSS earlier today, but I obviously did something wrong because it appeared not to work. However, I just posted it again and now it worked. Sorry to waste your time...but thank you!

@paul2009, regarding linking to sections: do you know of a way in Fluid Engine (preferably with CSS but js is ok) to offset an anchor link within a section and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative  to the size of the browser window.
To explain what I'm trying to create:
I have a page with multiple sections, and each section has its own full screen background image. In each section I have a button to link to the section below it. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability. Any ideas? Is it possible? I can give the site and password if you wish to take a look.
In any case, THANKS!

@iamdavehart
Deployed your "Best Answer" and it worked beautifully! Again, thanks for the time you spent on it.

@watts-creative
ok, I'll answer because it is sort of interesting and I like interesting posts. The interesting thing is the implementation of fluid engine blocks, and what that means for css rules within it. No-one's got time for long explanations so I'll just put my favourite answer first, then I'll add more detail beneath it.
Best answer (most elegant IMHO)
In a fluid engine layout summary blocks are rendered even when they're empty. to achieve this, sqs have used container elements, but they do render an internal content wrapper tag, which is rendered empty (zero white-space) in an empty summary block. CSS let's you use the :empty pseudo selector to find this, and then (somewhat counter intuitively) lets you add content into it using ::before pseudo elements. so... you can do this 
.fe-block .sqs-block-summary-v2 .sqs-block-content:empty::before { display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; content:'Nothing To See Here' } and now any summary block that's empty gets a nice message, sized the same as the original summary block
 
Alternative Answer - Thinking 3D
I think the real problem here is that the fluid engine layouts aren't that fluid. they're fixed and the elements are positioned. that means that to show a good "there's nothing here" message it needs to be placed in the same place as the summary block. but we do have a front-to-back ordering in a grid unlike a flow layout... 
So I genuinely thing that the answer here is to make your "nothing here" message as normal. just a text block or something. put it "underneath" your summary block by setting the z-order in squarespace (send to back).  now you'll be able to see through it so what you want is to set your summary block (which is transparent by default) to have the same opaque colour as your background. you can use the colour or the css variable for the site background or section background or whatever. now when your summary block is full it will be put in front of your no-content message, and when it's empty you'll see your message.
The interesting thing about this is that squarespace DO render the fluid block in the same size even if its empty, but they don't absolutely size the block contents container so this approach does work. This would therefore be useful if you wanted a complex text block for your message. e.g. with links etc.
.fe-block .sqs-block-summary-v2 .sqs-block-content { background:white; } remember to make sure that your "nothing here" block is set behind the summary block in both desktop and mobile view. you'll have to do that explictly.  
Another approach I opted against: CSS Container Query
You could also use a css container query (:has) which would be similar to the original answer, but I've opted not to do that. Container queries are awesome, but they're just a little too new and support is opt-in on firefox. the container query would allow us to find code blocks that were general siblings of a summary block and then show/hide the code block accordingly. There's a caveat here though, that the fluid blocks are absolutely positioned, but css sibling selectors don't work like that, so you'd have to make sure that the code block was added second and that's going to be hard to debug if you get it wrong...
container queries are going to make a lot of really useful css editing possible. maybe not today in this case, but soon they'll be everywhere... 
 
Final Thoughts
I'm not sure I'm a great fan of fluid engine layouts as default. Grid layouts can be great, but it seems to me that flow layouts are more useful (esp in responsive situations) so I really hope they don't get rid of the "classic" layout altogether (or at least give us a flow container block...)
that was a very long answer. sorry.

No. URI fragments only work with id or name attributes. In the context of SS you can't use dynamic ids. Non dynamic ids generally begin with block- or other similar identifiers. If the id begins with yui_ it is dynamic.
I don't have any other answers to your questions at this time.

Thanks @creedon! Worked great, although I had to change color to border-color because it was coloring the nav item preceding the line.
You rock!

I have updated my post.

Seems like a useful feature for smaller businesses who, like my client, offer a limited number of bespoke kits that she puts together every month (doesn't have the bandwidth/resources for more than 8 kits). She'll just need to track it manually...and take down the item once she's reached the maximum.
Anyway, thanks @paul2009. 

@watts-design
You can restrict the effect with something like the following.
.header-nav-item:first-child .header-nav-folder-item:nth-child( 6 ) { border-bottom : 1px solid; color : #9c9a84; margin-left : 25%; padding-bottom : 0.5em; } .header-nav-item:first-child .header-nav-folder-item:nth-child( 7 ) { padding-top : 0.5em; } .header-menu-nav-folder:nth-child( 2 ) .header-menu-nav-item:nth-child( 7 ) a { border-bottom : 1px solid; color : #9c9a84; display : inline-block; padding-bottom : 1em; } Let us know how it goes.

don't know if this is relevant posting this on an old thread (i'm relatively new to adding messages to forums so haven't seen a lot of the old ones), but saw this and thought that there's a css only way to do this that might be easier to maintain, and I think then wouldn't need premium, and the browser may render more quickly. essentially you can use a + selector which says "find me an element that is immediately preceded by this other element". We can use this to say "find me a code block that is immediately after a summary block", which means the selector won't fire if the block is removed. 
So all you need to do is add a code block after each summary block you want to do this for (they can be anywhere you want, just the code block has to come straight after it). put a div in there with a class of "no-summary" and add the message you want. 
<div class="no-summary">Nothing to see here</div> then add the following css to your custom css, or inject it into your page or however you want
<style> .no-summary { display:block; } .sqs-block-summary-v2+.sqs-block-code .no-summary { display:none; } </style> hides any no-summary message that appears in a code block that immediately follows a summary block. This way you can add the css once and just add as many "no summary items" messages as you want.
Just offering it as an alternative. 
(there may be better classes to use for the + selector, I just used the 7.1 ones I saw. could probably be a bit more specific)

@tuanphan
Thanks so much, the code worked beautifully! I had to make a few adjustments to meet my style and function needs, but you getting it on the page was a HUGE help. As ever, you rock! :)
 

Add to Last Line in Code Injection Footer
<script> jQuery(document).ready(function($) { $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--left"><a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Back to Shop</a></div></div></section>').insertBefore("nav.ProductItem-nav"); }); </script>  

If it's working I don't see a problem and if you want the effect site wide then Custom CSS is a good place for the code. Minus the style tag of course! 🙂

It appears you have nested the style tag in a script tag. That won't work.
<script>    $(function() {      $("<a class='outline_btn4' href='javascript:history.back()'>Back</a>").insertAfter(".ProductItem-nav-breadcrumb");            })<style>   /*        begin change store product grid column number          Version         : 0.1d0          SS Version      : 7.1          By              : Thomas Creedon < http://www.tomsWeb.consulting/ >          */          .products.collection-content-wrapper .list-grid {            --twc-columns : 6;              }            /* do not change anything below, there be the borg here */          .products.collection-content-wrapper .list-grid {            grid-template-columns : repeat( var( --twc-columns ), minmax( 0, 1fr ) );              }            /* end change store product grid column number */        </style><script>Static.COOKIE_BANNER_CAPABLE = true;</script> It should probably look more like.
<style>   /*        begin change store product grid column number          Version         : 0.1d0          SS Version      : 7.1          By              : Thomas Creedon < http://www.tomsWeb.consulting/ >          */          .products.collection-content-wrapper .list-grid {            --twc-columns : 6;              }            /* do not change anything below, there be the borg here */          .products.collection-content-wrapper .list-grid {            grid-template-columns : repeat( var( --twc-columns ), minmax( 0, 1fr ) );              }            /* end change store product grid column number */        </style> <script>    $(function() {      $("<a class='outline_btn4' href='javascript:history.back()'>Back</a>").insertAfter(".ProductItem-nav-breadcrumb");            }) Static.COOKIE_BANNER_CAPABLE = true; </script> Let us know how it goes.

Please provide the URL for your site so we can take a look at it.

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