ilseS

Is there a  way to mitigate this right and bottom overflow, while maintaining image radius? It looks too off-center on mobile. 

Site URL: https://www.danieljoseph.com.au/films
Hey there,

I am having trouble with adding a simple hover effect to my image blocks in the new Fluid Engine.

Essentially I am trying to recreate this: http://www.ladybaguette.com/

Currently I have managed to Frankenstein some code which isolates each block individually and achieves the slight fade to black instead of the white background. Although for some reason I can't figure out why my ease transition CSS isn't working.

My Code:
#block-b1dfc7170d9088ca974b:hover .content-fill:after {
   content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all .3s;
}
#block-b1dfc7170d9088ca974b:hover .content-fill:after {
    opacity: .3;
    transition: all .3s;
}
 
^^ This is then replicated with the new block ID for the other images

Another problem is that the fade animation will not happen when the cursor is over the text block which is on-top of the image.

Any help in order to fix this would be much appreciated!!

I am coming to terms with some of the Fluid Engine changes and learning ways around features that used to exist and I'm starting to take advantage of some new features. I just wanted to start a thread that lists out some things I wish that fluid engine allowed or did. Please add on if you have things you wish to see as well. Perhaps Squarespace will take these things into consideration for the next update. 
Here's my wish list so far:
- Centering of blocks on a horizontal plane. I have spent so much time trying to get two or three different blocks to look like they're all centered on a horizontal line. The blocks often have different heights based on what kind of block they are (i.e. a social links block has more padding than say a text block does). So perhaps what I really want is a standard amount of forced padding around the content in blocks. I don't know. This is just super frustrating. Drag and drop is great for flexibility and especially nice for open-concept asymmetrical sites. It is not that great for sites that need to have content displayed in a lined up way.
- The ability to move a block between sections 
- Image / text wrapping without the need for a markdown block. It's great that we can have text bleed over images but I think it is folly to make this the default way that text and images show up together on a page if you drag an image into a text block. Text wrapping was available with the classic editor and I wish it was available with FE. Using markdown blocks to wrap text around images is a pain in the butt. 
- I just really miss the classic editor image /text blocks like the card layout . Surely there is a way to add those as blocks? It is so time consuming and annoying to make text and images line up manually. 
- Better responsive design for browser windows for the the in-between full width and mobile width sized windows (and tablets). Things move around in a weird way with FE when windows are sized down. Sure, you can edit the mobile design but you have to make changes to CSS just for tablet sized things to show up in a way that doesn't look bad?? This is a big problem. Squarespace's responsive design was a huge reason I chose to work within squarespace for most of my clients. Now, the responsive design has been downgraded.  
Thats all for now -- and I'll sign off with this: When I run into a problem that is really annoying to solve within Fluid Engine, I'm simply backtracking and crating what I actually want with the classic editor. Things are going to have to get better for me to exclusively use FE. 
 
 

@JoelleM my author site is build on fluid engine. https://www.queenoftaboo.com It's not kid friendly, but I did have fun making it in fluid engine.

How is everyone feeling about the fluid engine? For some of the cool new features have any of you noticed all the removal of animations, captions, etc and mobile view, whilst being about to correct it, seems to throw things all over the place.
I'd love to know your experience of it.

Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color
/* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles
/* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles
/* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color
/* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background
/* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content
First, add some text then Underline them

Next, use this CSS
/* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result

#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image 
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01

Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result

If adding 3 images, doing this



and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url 

highlight the text url > Add same image url (enable Open in New Window)

then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>  
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title
See this comment

Wrote by @tuanphan

Hi,

Question about fluid engine and animation styles. It seems prior to fluid engine we could go into each block and change the animation style. As of now in fluid engine, it basically seems as if we are stuck with the site wide animation. I'm wondering if i am missing something here and if there is a way to change the animation for each section in fluid engine. Any advice is appreciated.

@tuanphan   Hello, I am trying to troubleshoot a similar problem-- using anchor links for fluid engine sections. I used the suggestion you made above which worked great for same-page anchor links to fluid engine sections, but it doesn't seem to be working when I try to link to the specific section from another page. 
For example, on the specialties page (https://orka-c1-sep.squarespace.com/specialties) I added a code block to fluid engine section "<span id="mood"></span>"
The button at the top of that page works with the link "#mood"
But to link to that section from the home page I added the link: https://orka-c1-sep.squarespace.com/specialties#mood , which doesn't work. 
Any suggestions are so appreciated!

Is this feature coming back in the future? I for one really like the text to have no animation but the images to have an animation. Now this is not possible with Fluid Engine, I'm stuck with either/or.
And is it the same with Lightboxes? I can't seem to select a Lightbox for images, which is very usefull with smaller images. 
Thank you.

Site URL: https://www.therockleypub.com.au/
I'm really struggling to adjust two buttons that are next to each other once the screen hits between 1828 - 1126p (it is fine for desktop and mobile) . One button text changes positioning and then the two buttons overlap. This has been an issue since using the fluid engine.
Thank you
 

In the Custom CSS panel you should add this code:
@media (max-width:767px) { section[data-section-id="632e50f9d2011344c3f06578"] .fluid-engine { grid-template-rows: unset; } }  

Yes this is exactly what I was looking for and must have overlooked this setting, thanks for taking the time to answer! Greatly appreciated 🙂

If I understand your question correctly ...you can toggle this on in settings -this will affect both desktop and mobile view. Setting on far right makes all cards the same height regardless of content.
 

This is a current problem in Squarespace Fluid Engine, when you open the accordion, the grid rows get stretched taller, and this then changes the spacing in adjoining rows.
You can fix this by moving the image up one row. This may make the spacing too tight between the text and image, so you can possible increase the row padding on that section, or you could drag the image block box up a block, set it to fit rather than fill, and set the alignment to the bottom of the image block box.
Hope this helps!

Unfortunately I gave up and reverted to just using a classic section and poster image blocks. Would love to see a solution for this on Fluid Engine though, as I use this functionality a lot 🤦🏽‍♂️
Working version is on adelska.com, the incomplete Fluid Section is still on https://bronze-sunfish-y8k7.squarespace.com,  password “hello” 

LOVE the new accordion block. @ghostpluginshas some great free Custom CSS for it too.
I did a quick video walkthrough of styling options here (there are some that are kinda hidden, like the description width): https://christyprice.com/blog/how-to-add-accordion-squarespace

I tried again yesterday to come to terms with FE, spending several hours trying to (re) create classic and basic SS styles using FE + an open mind, and ended up on the verge of leaving Squarespace -EVERYTHING to do with image blocks is gone; image styles (poster, overlap, etc.) animations, the option to add a caption, just trying to get text and buttons to align properly ... and then do the whole thing again anywhere I want that layout. (And then edit for mobile)

And the mobile rendering? 🤯  Yes, it's nice to eliminate or change a section on mobile view without CSS, but to have to check and edit/redesign the entire site as you go because with FE mobile now renders based on timeline (when you added the sections/blocks!) 
It's all over the place ... 
Who are the people FE was tested on that determined it was faster and more intuitive?? For sure not the general DIY population who are the backbone of SS, and not designers ...

There are advanced designers who are loving the flexibility and can use advanced CSS, HTML and Java to make it work for them, but many of us do not fall into that category. I dare say, the majority of SS users do not.

Maybe Im the only one, but I actually really like the option of spacer blocks. I use them to set up my own even grid, and serve many purposes ...they are a fundamental tool. 
As are image block options ...please give us the OPTION to use FE

This forced "migration" to FE is going to be disastrous for many long time loyal SS customers. 
Are you reading these threads?? 
PLEASE make FE a CHOICE! And keep classic not just for a few months, but forever. Just as you have with 7.0 and 7.1 -proving that it's possible.
 
 

Hi lovely people! and @tuanphan
Is there a trick to getting image borders to work in fluid engine? I used the code provided in this thread, which works, but it only shows up on the top and bottom of the image. I also tried a few other codes but none of them put the border around the entire image without weird spacing or getting cut off. The image is set to fit, which is important.
URL: https://maroon-potato-2ta2.squarespace.com/
PW: Breathe:)
(you'll see there is a thin blue border around the image but this is from the actual image file. I'm trying to set up this border with code so that if the client updates the photo, it will still have a border)
Thanks!

I wouldn't say that the need is negated. Other folks have expressed the desire to have those image types return to FE. I hope SS will bring them back. I think there is a need for the FE free form method but also it is nice to have more structured elements like images cards. With image cards the flexibility is reduced but the speed of implementing an effect is speed up dramatically.

Same issue here, seems to be an ongoing one. I removed some text from my website last week to align images, applied the changes, saved them, done editing, refreshed my browser (Google Chrome) and double checked off of Squarespace the updates were made publicly--confirmed edits were removed, it all worked just fine.
One week later the old text is back, refreshed my browser and went into SS editor and yes the old text made its way back, my images are misaligned again. I just made the edits again and the revisions are saved back to how they are supposed to be. I will check again in one week. I'm the only one with access to make edits to the website, I don't feel it's a browser, refresh, or cache issue on my end, however, I'm willing to try new things that work better. If this happens again I'm going to try downloading Firefox as I've researched and found the Squarespace platform may process HTML and javascript site requirements better on FF than other browsers.

idk maybe you can contact support and ask them to give you complimentary access to circle specifically so you can turn FE on and off. I find it useful for some sections and not for others. It can be toggled during design, and each section has its own editor type, either classic or FE.

Using FE was a huge mistake for me. Not sure why SS is pushing it unless "Circle Members" have different options. Spent hours trying to get the mobile to show properly. If you want to pull your hair out and curse with no support then go ahead and give it a try. It's not easy and not cool. Check out more on the forums and you will see how other users are not liking it either.

If I understand your question correctly ...you can toggle this on in settings -this will affect both desktop and mobile view. Setting on far right makes all cards the same height regardless of content.
 

I tried using it yesterday. Started out cool.  l positioned everything, even the text boxes. Then I started adding my text and everything kept moving around. Did I miss something or do you have to redesign a page 20 times?  

I agree it's terrible. Why do I have to make separate designs for desktop and mobile? Mobile version is terrible, never looks as intended. I don't want to move boxes all day like a warehouse employee. I bought Squarespace for my website because ut was simple, looked great. Now it's more clunky than Wordpress that I hate with passion.