watts-creative

Folks, pay attention to @creedon's post above. SS doesn't track feature requests in forums, so all you're doing is making the rest of us wade through your pointless "bump" posts in search of answers. To make this feature request, Contact Support. Thanks.

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!

@creedon Thanks for your reply. I read through the whole thread you posted, and while the following code got rid of the time for the Event list page, it left the commas. See screenshot.

span.eventlist-meta-time {
    display: none !important;
}

Someone actually followed up with this same issue about the commas on that thread, but then the conversation got derailed by a different request. I read through the whole thing twice and couldn't find the solution for removing the commas. Again, this is just for my multi-day events on the Events listing page...I've got it working on the Event detail page.

Thanks for your help!

Hey all,

Following up on this. I too have a 7.1 site, and I was able to hide the times and commas for multi-day events on the event detail page but not on the event list page. Can someone help with that CSS?

Page is https://www.heroeslinked.org/events-1, third event down.

Thanks in advance!

@iamdavehart, you are a steely-eyed missile man!

Just read through your whole post—including the Do it with CSS (please don't! do it with code!) section—and once again you explained your methodology perfectly. Do you teach? If you don't, you should.

Going to read through again tomorrow, when I haven't had a couple glasses of wine, but at first glance your js solution sounds perfect. Sadly, the need I had for this that sent me questing for solutions in the first place was ultimately nixed by my client, but I plan to implement this on my personal site, so I thank you for taking the time to distract your brain!!

@iamdavehart

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

@iamdavehart, I am a huge proponent of the long answer when someone explains something as methodically and clearly as you have done. And your solution(s) outlined above are as elegant as your previous one!

I haven't implemented any of your solutions yet, but will get back if I have issues (which will most assuredly be user input error, of course).

Regarding your Final Thoughts, I concur with your FE review. As a conventional graphic designer—who cut his teeth on programs like Adobe Illustrator, which essentially uses a grid layout scheme with layers to assemble a design—I think SS's approach with FE feels more like what I'm used to. But where AI is a robust, powerful layout tool, many years in the developing, FE is in its infancy...as clumsy as a toddler sometimes, especially since I had finally gotten to a point where I felt comfortable hacking my way through much of the code (or stealing someone else's hacks!) to achieve the result I was looking for. FE solved many layout issues, but created problems for many others. In any case, this is where we are, and I appreciate SS making this approach available.

Thanks again!

On 12/10/2021 at 6:13 PM, iamdavehart said:

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)

@iamdavehart

This simple, elegant solution worked well for me prior to Fluid Engine. But now it's broken. Have you (or anyone) updated this for FE? The issue is placing the code block directly below the summary block. Previously, as you know, you clicked the + sign below the summary block and added the code block. In FE, you drag the code block to below the summary block, which doesn't work, and I'm not coder enough to figure out how to change it. Your help is very much appreciated!

On 4/10/2022 at 6:53 AM, tuanphan said:

You can add a Code Block with anchor id. Then use CSS to move down Code Block into List Section.

Or use JavaScript to add a Code Block into List Section

If you don't know CSS/JavaScript, you can add a Code Block at section above or under List Section, then we will give the code to move it.

@tuanphan, I've asked this elsewhere, but do you know of a way in Fluid Engine to offset the anchor link 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:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In each section I have a button to link to the section below it.
3. 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.
4. 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.

Is it possible to stick that anchor to the beginning of the section? I can give the site and password if you wish to take a look.

In any case, THANKS!

On 6/1/2022 at 6:25 AM, paul2009 said:

data-section-id="627a245add445f6d5442c552"

These are totally different 😮 and cannot be used in anchor links, so you'll therefore need to use an alternative ID. If the section supports it, you can add a Code Block to manually add an ID and then use this instead. It's a common question so there's a support article that explains how to do this here: Creating anchor links.

 

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

@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:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In each section I have a button to link to the section below it.
3. 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.
4. 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!

I have similar questions and problems I'm trying to troubleshoot in Fluid Engine:

1. Is there any way to link to a page's section[data-section-id="###"] selector?
   1. I suppose this is analogous to linking to page-section-id as one used to be able to do previous to 7.1.
2. If not, is there a way (preferably with CSS) to force an anchor link within a section to stick absolutely to the beginning of its section, regardless of the browser window's size? That way, when you link to it, it will always scroll to the beginning of that section.
   1. 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:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In the first section I have a button to link to the section below it. That section has a button to link to the section below it, and so on.
3. I've set anchor divs in each section, but now it scrolls down to wherever the link is on the page, and I want it to scroll to the very beginning of the section.
4. I've tried to finesse it for various screen sizes, but it doesn't look right. In any case I'd like it to ALWAYS scroll to the beginning of the section regardless, as stated before.

Anyone with any ideas? I can give the site and password if someone wishes to take a look.

In any case, THANKS!

I have similar questions and problems I'm trying to troubleshoot in Fluid Engine:

1. Is there any way to link to a page's section[data-section-id="###"] selector?
   1. I suppose this is analogous to linking to page-section-id as one used to be able to do previous to 7.1.
2. If not, is there a way (preferably with CSS) to force an anchor link within a section to stick absolutely to the beginning of its section, regardless of the browser window's size? That way, when you link to it, it will always scroll to the beginning of that section.
   1. 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:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In the first section I have a button to link to the section below it. That section has a button to link to the section below it, and so on.
3. I've set anchor divs in each section, but now it scrolls down to wherever the link is on the page, and I want it to scroll to the very beginning of the section.
4. I've tried to finesse it for various screen sizes, but it doesn't look right. In any case I'd like it to ALWAYS scroll to the beginning of the section regardless, as stated before.

Anyone with any ideas? I can give the site and password if someone wishes to take a look.

In any case, THANKS!

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!

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. 

@creedon, thanks!

For some reason your entire code didn't work. However, when I added just the .header-nav-item:first-child to the beginning of what I had it worked great.

I forgot to ask you to solve for mobile as well. Here's the mobile code I have now:

.header-menu-nav-item:nth-of-type(7) a {
  display: inline-block;
  border-bottom: 1px solid;
  padding-bottom: 1em;
  color: #9c9a84;
 }

Again, my website is https://www.meetinghousefabric.com/

And again, thanks!

On 9/17/2020 at 2:16 PM, creedon said:

Second shot!

/* desktop */

.header-nav-folder-item:nth-of-type(12) {

  border-bottom: 1px solid;
  padding-bottom: 1em;
  
  }

.header-nav-folder-item:nth-of-type(13) {

  padding-top: 1em;
  
  }

/* mobile */

.header-menu-nav-item:nth-of-type(13) a {

  display: inline-block;
  border-bottom: 1px solid;
  padding-bottom: 1em;
  
  }


.header-menu-nav-item:nth-of-type(14) a {

  padding-top: 1em;
  
  }

This CSS is very specific to your current menu layout. If you change the order of the menu items then you need to update the CSS. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. In that case another way to target the menu you want to style would be needed. Something like .header-nav-item header-nav-item--folder:nth-of-type(n);

Let us know how it goes.

@creedonYour code worked beautifully for my site. I used it for a while and then, as you cautioned "If you add another Folder Page and it has as many or more items then it too would pick up this CSS." 

That's exactly what happened and so I'm now in need of "another way to target the menu" I want to style. My site is public: https://www.meetinghousefabric.com/ and I'd like to add the divider to the first nav menu—Shop—but none of the others. I played with your ".header-nav-item header-nav-item--folder:nth-of-type(n);" suggestion, but not coder enough to get it to work. Would you have time to help?

Thanks!

It appears this question was never answered. I have a client who wants to only offer 8 subscriptions for a particular product. Once those 8 subscriptions have been purchased, the product should say Sold Out.

But there isn't a way to choose quantity for Subscription products. Or is there something I've missed? Or a suggested workaround? Thanks.

@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! :)

Hey @tuanphan, there isn't actually a button on the product detail page. You may have been looking at the image in my previous post...I added the button to that in Photoshop only to show where I'd like the button to go. But that doesn't exist on the actual page:

https://meeting-house-fabric.squarespace.com/shop/p/primitive-gatherings-muslin-for-moda-1040-21-tallow-wmhtg-gads6-gmfmj-fst75-h8wm8-hrjme?rq=Kona

thanks and appreciate any help

A

On 7/13/2021 at 5:29 AM, tuanphan said:

Hi. Replace 1 image or multiple images?

If 1 or some images, we can use CSS to do this.

Hi @tuanphan

Following up on this question. In 7.1, gallery image blocks do not give you the functionality to simply replace an image within them. Instead you have to delete the image, description, and link altogether, then upload a new image and fill out that info all over again. Is there a way around this? You're able to do it with the other image blocks by selecting "Remove Image" (see first screenshot), then selecting a new one to upload. You used to be able to do that with Gallery blocks in 7.0, but the functionality is no longer there (see second screenshot). It only allows you to "Edit Image".

Any ideas how to achieve that with the Gallery block?

Site URL: https://meeting-house-fabric.squarespace.com

I seem to find similar questions to this, but no definitive answer to my issue.

Despite telling my client that users can make use of their browser's back button, she has insisted I put a styled back button on her site's shopping pages. Originally I turned on breadcrumbs, but frankly, SS's implementation of that feature is terrible, and it doesn't quite give me the functionality I need.

So I added a code block that works with the site's overall style, and am able to put it on the collections pages (see first screenshot), but not on a product's detail page (which is where she wants it most!).

Can anyone help me add the back button in roughly the same spot on the product's detail page? (See second photoshopped screenshot for how I'd like it to look.)

website: https://meeting-house-fabric.squarespace.com
pass: fabric

button:

<button style="width: 90px" class="outline_btn3" onclick="history.back(-1)"/><center>Back</center></button>

css:

.outline_btn3 {
    border-style: solid;
  	border-width: 2px;
  	border-color: #9c9a84;
    background-color: transparent;
    color: #9c9a84;
    padding: 12px 24px;
    font-size: 15px;
    cursor: pointer;
}
.outline_btn3:hover {
    background-color: #9c9a84;
    color: #ffffff;
}

Thanks so much, Creedon! Thing is, though, the code didn't work in my Store page code injection. It did work when I put it in Design / Custom CSS. I want it to work site-wide, and it looks good throughout the site, so I'm happy with it. But do you foresee an issue with me doing it that way?

Hey Thomas...thanks so much for your help! I believe I entered your code as you directed but it didn't work. Just to be sure I did it correctly, attached is a screenshot of the page header code injection for my store settings page. As you can see, the only thing I changed as directed was the number of columns to 6. Did I do it correctly?

6 hours ago, tuanphan said:

Hi. Replace 1 image or multiple images?

If 1 or some images, we can use CSS to do this.

Hi tuanphan! Well, really, multiple images. In creating my site for my client, I like setting up the gallery with dummy images, so my client can get an idea of what it looks like. Once they decide on the final thumbnails, I want to replace all those dummy images. In 7.0 you could double-click a gallery image, choose Remove Image, then upload a new image to replace it, all without having to change the image description or link. With 7.1, you have to delete the image, description, and link altogether, then upload a new image and fill out that info all over again. Why would SS remove that functionality?

Anyway, here's a sample page on my site. The gray "product" image thumbnails are the ones I'd like to replace with new images, without having to start from scratch each time!

https://meeting-house-fabric.squarespace.com/fabric-collections-country-chic

pw: fabric

Thanks!

I'm looking for this solution, too. Really frustrating that it's not built in to 7.1.