creedon Posted May 25, 2022 Share Posted May 25, 2022 Hey I just discovered something I hadn't noticed! SS was ahead of the curve! Color me red! So Custom CSS isn't need unless you have some needs the options don't cover. @DevonHarris tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
JTeich Posted May 26, 2022 Share Posted May 26, 2022 On 5/24/2022 at 4:29 PM, creedon said: This may be closer. This is not a solution but an experiment. For it to work the default lines need to be hidden, which you've done already, it appears. .sqs-block-accordion .accordion-items-container { border-top-left-radius : 10px; border-top-right-radius : 10px; border : solid 2px red; padding-left : 1em; padding-right : 1em; } Let us know how it goes. Sadly this didn't work either. Both suggestions make a red ring around the accordion instead of just making the actual (blue) corners round. (pic attached) Interestingly this code makes the top two red corners round and the bottom two not, just like the original code and original problem. The code that makes the top two edges sharp is this border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; So the code for the bottom two corners is likely similar. Link to comment
JTeich Posted May 26, 2022 Share Posted May 26, 2022 On 5/24/2022 at 11:13 PM, creedon said: Hey I just discovered something I hadn't noticed! SS was ahead of the curve! Color me red! So Custom CSS isn't need unless you have some needs the options don't cover. @DevonHarris Could you explain more how this will help? I'm looking for the dark blue accordion to have rounded edges. The original code only puts rounded edges on the top left and right, not the bottom left and right. Apologies for my confusion 🙂 Link to comment
creedon Posted May 26, 2022 Share Posted May 26, 2022 (edited) 37 minutes ago, JTeich said: Could you explain more how this will help? My comment was for those who had used my code to hide lines in the accordion. Usually when I answer someone directly I include their handle in my post if they aren't the original poster. Edited May 26, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
JTeich Posted May 26, 2022 Share Posted May 26, 2022 16 minutes ago, creedon said: My comment was for those who has used my code to hide lines in the accordion. Usually when I answer someone directly I include their handle in my post if they aren't the original poster. Apologies. Link to comment
creedon Posted May 26, 2022 Share Posted May 26, 2022 12 minutes ago, JTeich said: Apologies. No worries! 🙂 I may have a solution to your issue. [enter block id here replacing square brackets] .accordion-items-container { border : solid 1px red; border-radius : 10px 10px 0 0; padding-left : 1.5em; padding-right : 1.5em; } Adjust to your needs. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
DevonHarris Posted May 29, 2022 Share Posted May 29, 2022 @creedon I'll be damned hahahha, who knew the solution was so simple! I'm glad they got intuitive on this! Thanks again for all your help!! creedon and tuanphan 2 Link to comment
IwanJ Posted June 2, 2022 Share Posted June 2, 2022 Hi @tuanphan, what awesome code, thank you! Is there a way on MOBILE VIEW for an accordion with images, to stack the accordion so that the drop down text comes after each image? Currently, with 3 accordion elements side by side, on mobile the 3 images stack first, then the dropdown menu for all three associated text sections comes after... So what I'm after for mobile accordion is: IMAGE + drop down text IMAGE + drop down text IMAGE + drop down text not IMAGE IMAGE IMAGE text text text Link to comment
junger Posted June 3, 2022 Share Posted June 3, 2022 (edited) Hello @tuanphan Would you know how to keep the plus icon next to the text even when the text is wrapping? I used whats below which works great until the text wraps .accordion-item__click-target { width: auto !important;} https://bluebird-ferret-emn3.squarespace.com/ pw: plena @tuanphan The accordions are on the about page https://bluebird-ferret-emn3.squarespace.com/about Edited June 3, 2022 by junger Link to comment
tuanphan Posted June 3, 2022 Author Share Posted June 3, 2022 21 hours ago, IwanJ said: Hi @tuanphan, what awesome code, thank you! Is there a way on MOBILE VIEW for an accordion with images, to stack the accordion so that the drop down text comes after each image? Currently, with 3 accordion elements side by side, on mobile the 3 images stack first, then the dropdown menu for all three associated text sections comes after... So what I'm after for mobile accordion is: IMAGE + drop down text IMAGE + drop down text IMAGE + drop down text not IMAGE IMAGE IMAGE text text text Can you share link to page in screenshot? Look your screenshot, I think you need to adjust a bit with layout 😆 Similar Map - Text. 6 hours ago, junger said: Hello @tuanphan Would you know how to keep the plus icon next to the text even when the text is wrapping? I used whats below which works great until the text wraps .accordion-item__click-target { width: auto !important;} https://bluebird-ferret-emn3.squarespace.com/ pw: plena Which page are you referring to? I don't see accordion on homepage Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JTeich Posted June 7, 2022 Share Posted June 7, 2022 On 5/26/2022 at 2:20 PM, creedon said: No worries! 🙂 I may have a solution to your issue. [enter block id here replacing square brackets] .accordion-items-container { border : solid 1px red; border-radius : 10px 10px 0 0; padding-left : 1.5em; padding-right : 1.5em; } Adjust to your needs. Let us know how it goes. Hello Creedon, Apologies for the delay in my response. It seems squarespace has an issue where established code blocks disappear, and all that can be done is to wait until squarespace allows the user to access it again. I've attached another screenshot. It seems this code still puts sharp edges along the bottom red line. Link to comment
creedon Posted June 7, 2022 Share Posted June 7, 2022 @JTeich It is hard to help in the abstract. Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
JTeich Posted June 7, 2022 Share Posted June 7, 2022 3 minutes ago, creedon said: @JTeich It is hard to help in the abstract. Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Good idea. Thanks so much! https://www.caroline-shenaz-hossein.com/portal-page Link to comment
creedon Posted June 7, 2022 Share Posted June 7, 2022 (edited) @JTeich I think this is what you want. Replace, make a copy somewhere, the previous attempt at this effect. Place in style tag. Use block design settings to turn off dividers. /* accordion title color */ .sqs-block-accordion .accordion-item__title-wrapper { background-color : #1a252f; color : white; padding-left : 20px; padding-right : 20px; } /* make first item round corner */ .sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius : 10px; border-top-right-radius: 10px; } .sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper { border-bottom-left-radius : 10px; border-bottom-right-radius: 10px; } .sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper { border-bottom-left-radius : unset; border-bottom-right-radius: unset; } .sqs-block-accordion .accordion-item__click-target { padding-bottom : 15px !important; padding-top : 15px !important; } /* accordion content padding */ .sqs-block-accordion .accordion-item__description { max-width : unset !important; padding : 20px !important; } Let us know how it goes. Edited June 13, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
awd113 Posted June 11, 2022 Share Posted June 11, 2022 (edited) Hi — some great options in this thread, thanks to @tuanphan and everyone who's contributed. However I do need some advice on how to stop the formatting going strange when the text on double columns goes over two lines. Sometimes even swaps the order around and puts second column text down the bottom of the first. Mainly happen on mobile. I don't mind text going over two lines, just want it to align with the top of the left column content to the top of the right column content. Hope that makes sense — I've attached some screenshots below (left correct / right incorrect) (Edit Removed). Website (Edit Removed). Seems to happen on both desktop or mobile, but mobile is worse as there's lots more 2 rows. Edited June 19, 2022 by awd113 Link to comment
tuanphan Posted June 13, 2022 Author Share Posted June 13, 2022 On 6/11/2022 at 7:16 PM, awd113 said: Hi — some great options in this thread, thanks to @tuanphan and everyone who's contributed. However I do need some advice on how to stop the formatting going strange when the text on double columns goes over two lines. Sometimes even swaps the order around and puts second column text down the bottom of the first. Mainly happen on mobile. I don't mind text going over two lines, just want it to align with the top of the left column content to the top of the right column content. Hope that makes sense — I've attached some screenshots below (left correct / right incorrect). Website: ka-ra.studio/pal (pw: aUdio5). Seems to happen on both desktop or mobile, but mobile is worse as there's lots more 2 rows. I have a solution, but you need to recreate whole accordion. @creedon do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck. div#block-yui_3_17_2_1_1654757272531_9064 li:nth-child(2) p:nth-child(5):after{ content: ""; display: block; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JTeich Posted June 13, 2022 Share Posted June 13, 2022 On 6/7/2022 at 1:01 PM, creedon said: @JTeich I think this is what you want. Replace, make a copy somewhere, the previous attempt at this effect. Place in style tag. Use block design settings to turn of dividers. /* accordion title color */ .sqs-block-accordion .accordion-item__title-wrapper { background-color : #1a252f; color : white; padding-left : 20px; padding-right : 20px; } /* make first item round corner */ .sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius : 10px; border-top-right-radius: 10px; } .sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper { border-bottom-left-radius : 10px; border-bottom-right-radius: 10px; } .sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper { border-bottom-left-radius : unset; border-bottom-right-radius: unset; } .sqs-block-accordion .accordion-item__click-target { padding-bottom : 15px !important; padding-top : 15px !important; } /* accordion content padding */ .sqs-block-accordion .accordion-item__description { max-width : unset !important; padding : 20px !important; } Let us know how it goes. Believe it or not this had no effect on the appearance of the accordion. I've kept it with the code you suggested. The page again is https://www.caroline-shenaz-hossein.com/portal-page Thank you so much for sticking with me. Link to comment
creedon Posted June 13, 2022 Share Posted June 13, 2022 2 hours ago, JTeich said: Believe it or not this had no effect on the appearance of the accordion. I've kept it with the code you suggested. The code you have installed is different from mine. After removing your code and putting mine in I get the following. accordion demo.mp4 The lines are there but those can be turned off in the SS options for the accordion. The toggles can be colored but I'd wait until you get the basic effect going before adding that in. JTeich 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted June 13, 2022 Share Posted June 13, 2022 10 hours ago, tuanphan said: do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck. I looked at this but the way the HTML is structured I just didn't see a clean way of getting the desired effect with CSS. It might be possible to restructure the HTML at bit with JavaScript to make it easier to address with CSS but I didn't explore that. @awd113 tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
JTeich Posted June 13, 2022 Share Posted June 13, 2022 56 minutes ago, creedon said: The code you have installed is different from mine. After removing your code and putting mine in I get the following. accordion demo.mp4 126.28 kB · 0 downloads The lines are there but those can be turned off in the SS options for the accordion. The toggles can be colored but I'd wait until you get the basic effect going before adding that in. OK! I fumbled around with it, even erasing everything and inserting your code (which broke everything for some reason), Discarded my changes, inserted your code again, and it worked. Perhaps there's other code somewhere that it was dependent on that i deleted. Anyways, thank you so much! I'm going to cut and paste it again just so it's clear to me (and also added back on white arrows instead of the default green). THANKS AGAIN! <style> /* accordion title color */ .sqs-block-accordion .accordion-item__title-wrapper { background-color : #1a252f; color : white; padding-left : 20px; padding-right : 20px; } /* make first item round corner */ .sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius : 10px; border-top-right-radius: 10px; } .sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper { border-bottom-left-radius : 10px; border-bottom-right-radius: 10px; } .sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper { border-bottom-left-radius : unset; border-bottom-right-radius: unset; } .sqs-block-accordion .accordion-item__click-target { padding-bottom : 15px !important; padding-top : 15px !important; } /* accordion content padding */ .sqs-block-accordion .accordion-item__description { max-width : unset !important; padding : 20px !important; } /* accordion arrows color */ .accordion-block .arrow { border-color: white !important; } </style> tuanphan and creedon 1 1 Link to comment
awd113 Posted June 15, 2022 Share Posted June 15, 2022 On 6/13/2022 at 7:02 PM, tuanphan said: I have a solution, but you need to recreate whole accordion. @creedon do you have an idea to solve this? I tried :after to add some blank content after some paragraph but no luck. div#block-yui_3_17_2_1_1654757272531_9064 li:nth-child(2) p:nth-child(5):after{ content: ""; display: block; } Hi @tuanphan and @creedon thanks for the information here. Appreciate your time. I'm happy to re-build / try another way if you think there's a better option? If not I might have to look into some other accordion options. I may be way off here (limited knowledge), but is there anyway to put a html table into the accordion? I have previously used those in Squarespace and they've scaled responsively quite well, but just not sure how to insert one here. Thanks again. Link to comment
tuanphan Posted June 15, 2022 Author Share Posted June 15, 2022 (edited) 5 hours ago, awd113 said: Hi @tuanphan and @creedon thanks for the information here. Appreciate your time. I'm happy to re-build / try another way if you think there's a better option? If not I might have to look into some other accordion options. I may be way off here (limited knowledge), but is there anyway to put a html table into the accordion? I have previously used those in Squarespace and they've scaled responsively quite well, but just not sure how to insert one here. Thanks again. This possible. Require a lot of code. Just sent you a private message Or you can also use Accordion Plugin (paid plugin) to do this (affiliate link) Edited June 15, 2022 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KerrFerg Posted June 15, 2022 Share Posted June 15, 2022 Thanks for this excellent thread! I'm making improvements on a client's website and want to condense their services into an accordion block with images, but the picture isn't filling the screen width and the mobile view isn't containing the image so it's unrecognisable. Is there a quick code fix for this? Can't link the page as I'm editing it unpublished, but have attached a couple of screenshots. Thanks in advance! Link to comment
tuanphan Posted June 15, 2022 Author Share Posted June 15, 2022 3 hours ago, KerrFerg said: Thanks for this excellent thread! I'm making improvements on a client's website and want to condense their services into an accordion block with images, but the picture isn't filling the screen width and the mobile view isn't containing the image so it's unrecognisable. Is there a quick code fix for this? Can't link the page as I'm editing it unpublished, but have attached a couple of screenshots. Thanks in advance! Can you share link to page in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
marcoadrielmunoz Posted July 6, 2022 Share Posted July 6, 2022 #9. Accordion Titles – Add Line Break I have three seperate accordions on my one page site. The code seems to only work for the first accordion. How might I add this functionality to my other accordions? Thanks! - Marco Website: https://antelope-harpsichord-4wpr.squarespace.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment