tuanphan Posted March 16, 2023 Author Share Posted March 16, 2023 On 3/11/2023 at 1:35 AM, acjr_noob said: @tuanphan link is here: https://blenny-sepia-7zas.squarespace.com/about Try adding to Design > Custom CSS div#block-3cf1eefc55e1376a73e5 li:nth-child(3) p:nth-child(3):before, div#block-3cf1eefc55e1376a73e5 li:nth-child(3) p:nth-child(4):before { display: inline-block; content: ""; background-color: red; width: 20px; height: 20px; border-radius: 50%; margin-right: 10px; } 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
simonlamont Posted April 24, 2023 Share Posted April 24, 2023 Hey, I've found when you use an Accordion and you've scrolled down reading the first item's content, but instead of closing the first item using the minus button, you hit the next item's plus button (because it's right there next to the bottom of the first item), then the second item opens at the end of its content (or even below it) not the beginning. Is there any way to correct this? Thanks. Link to comment
koko1234 Posted May 10, 2023 Share Posted May 10, 2023 @tuanphan Hi! I'm wanting to create a pill shape border around each heading in my accordion, and hoping for the pill shape to expand when clicked on (to show the rest of the text). Do you know how i might be able to do this? I have added a reference image below of what i am after. Thanks! Link to comment
creedon Posted May 10, 2023 Share Posted May 10, 2023 12 hours ago, koko1234 said: I'm wanting to create a pill shape border around each heading in my accordion, and hoping for the pill shape to expand when clicked on (to show the rest of the text). Did you check out my May 19, 2022? Let us know how it goes. 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
koko1234 Posted May 10, 2023 Share Posted May 10, 2023 35 minutes ago, creedon said: Did you check out my May 19, 2022? Let us know how it goes. I tried that, but it created a border around the entire accordion instead of each heading. Do you know how I could alter that code to change that? Cheers! Link to comment
creedon Posted May 11, 2023 Share Posted May 11, 2023 5 hours ago, koko1234 said: Do you know how I could alter that code to change that? Ah. I get ya. Try the following as a starting point. .sqs-block-accordion .accordion-item { border : 2px solid red; border-radius : 50px; margin-bottom : 15px; padding-left : 50px; padding-right : 50px; } 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
koko1234 Posted May 11, 2023 Share Posted May 11, 2023 5 hours ago, creedon said: Ah. I get ya. Try the following as a starting point. .sqs-block-accordion .accordion-item { border : 2px solid red; border-radius : 50px; margin-bottom : 15px; padding-left : 50px; padding-right : 50px; } Let us know how it goes. That works perfectly - Legend! Thanks heaps tuanphan and creedon 1 1 Link to comment
weeghee Posted July 17, 2023 Share Posted July 17, 2023 hi! i used a template accordion design for a page on my site, and it has these little round bullets that i'm trying to remove, but have no idea how to. they don't look like they're part of the accordion item title, and i haven't been able to remove them through any of the provided options. i haven't really fiddled with the custom css for the page except to add underlines for hyperlinks. would anyone be able to assist please? thanks! the page in question is https://www.derrickteoplanning.com/technical-skills Link to comment
tuanphan Posted July 19, 2023 Author Share Posted July 19, 2023 On 7/17/2023 at 4:13 PM, weeghee said: hi! i used a template accordion design for a page on my site, and it has these little round bullets that i'm trying to remove, but have no idea how to. they don't look like they're part of the accordion item title, and i haven't been able to remove them through any of the provided options. i haven't really fiddled with the custom css for the page except to add underlines for hyperlinks. would anyone be able to assist please? thanks! the page in question is https://www.derrickteoplanning.com/technical-skills You have this code in CSS box, it caused problem li>*:first-child::before { content: "○" !important; } find & change it to li:not(.accordion-item)>*:first-child::before { content: "○" !important } weeghee 1 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
BarryDesignsSquares Posted August 15, 2023 Share Posted August 15, 2023 Hello, apologies if this has come up before. I am trying to edit my accordion so that 'Show more +' turns into 'Show less -' when the text is open. Does anyone know the Custom CSS to get this done? https://trumpet-okra-z878.squarespace.com/config/pages Link to comment
tuanphan Posted August 16, 2023 Author Share Posted August 16, 2023 16 hours ago, BarryDesignsSquares said: Hello, apologies if this has come up before. I am trying to edit my accordion so that 'Show more +' turns into 'Show less -' when the text is open. Does anyone know the Custom CSS to get this done? https://trumpet-okra-z878.squarespace.com/config/pages Which page do you use accordion? https://trumpet-okra-z878.squarespace.com/?noredirect 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
youroleksii Posted August 16, 2023 Share Posted August 16, 2023 @tuanphan Hi! How to change the font weight within the button in the accordion block? Thank you! Link to comment
tuanphan Posted August 16, 2023 Author Share Posted August 16, 2023 1 hour ago, youroleksii said: @tuanphan Hi! How to change the font weight within the button in the accordion block? Thank you! Did you use code to turn link to button or? Can you share link to page where you use accordion? 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
BarryDesignsSquares Posted August 22, 2023 Share Posted August 22, 2023 @tuanphan Thank you for getting back to me! I use it on the 'home' page. Link here - https://www.creators-counsel.com/home It's in the second section below 'About Us' Link to comment
tuanphan Posted August 23, 2023 Author Share Posted August 23, 2023 On 8/22/2023 at 3:33 PM, BarryDesignsSquares said: @tuanphan Thank you for getting back to me! I use it on the 'home' page. Link here - https://www.creators-counsel.com/home It's in the second section below 'About Us' Add this to Website > Website Tools > Custom CSS /* Show more show less */ div#block-yui_3_17_2_1_1690813166951_25850 { li[data-is-open="true"] span.accordion-item__title { visibility: hidden; } li[data-is-open="true"] span.accordion-item__title:before { visibility: visible; content: "Show less-"; display: block; }} BarryDesignsSquares 1 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
BarryDesignsSquares Posted August 23, 2023 Share Posted August 23, 2023 @tuanphan you're a star thank you so much tuanphan 1 Link to comment
damianjames Posted October 10, 2023 Share Posted October 10, 2023 hi, i am using accordions on the website, i have managed to build one with images, but when i make new accordions it displays the same images as the first one. i saw some code about adding style to the top and end of the code but it doesn't seem to work and just gives me error codes i want some way of making each accordion separate on the code so i can add different images to every accordion i make. also i wanted the images to be the full length of the accordion like they are in mobile view but in desktop view they have a gap in the right hand side of the images i am also having issues with the header, for some reason when the drop down menu is shown on mobile it shows my text in white when it should be black i am guessing i have missed something that's easy to change on it but i cant find what i have done wrong. the websites no where near finished but i wanted to make sure the coding was right before i started to make it look fancy. hopefully someone on here knows how to sort the accordion code cheers Link to comment
tuanphan Posted October 12, 2023 Author Share Posted October 12, 2023 On 10/10/2023 at 7:25 PM, damianjames said: hi, i am using accordions on the website, i have managed to build one with images, but when i make new accordions it displays the same images as the first one. i saw some code about adding style to the top and end of the code but it doesn't seem to work and just gives me error codes i want some way of making each accordion separate on the code so i can add different images to every accordion i make. also i wanted the images to be the full length of the accordion like they are in mobile view but in desktop view they have a gap in the right hand side of the images i am also having issues with the header, for some reason when the drop down menu is shown on mobile it shows my text in white when it should be black i am guessing i have missed something that's easy to change on it but i cant find what i have done wrong. the websites no where near finished but i wanted to make sure the coding was right before i started to make it look fancy. hopefully someone on here knows how to sort the accordion code cheers Hi, Can you share link to page where you use accordion? 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
Despina Posted October 26, 2023 Share Posted October 26, 2023 Great list @tuanphan! I need No 14 but i have many accordion blocks in the site. it would be very helpful if there is a way for a specific section or block. also when I edit the size of the image it doesn't change in all but only in one accordion block Link to comment
LarryAP Posted October 27, 2023 Share Posted October 27, 2023 Hi I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger but the container size is cropping it I think. //Change Accordian Plus/Minus (+/-) to custom icon// /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } Link to comment
tuanphan Posted October 29, 2023 Author Share Posted October 29, 2023 On 10/27/2023 at 11:08 PM, LarryAP said: Hi I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger but the container size is cropping it I think. //Change Accordian Plus/Minus (+/-) to custom icon// /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } You can change contain to a specific value, for example: background-size: 100px; On 10/26/2023 at 4:37 PM, Despina said: Great list @tuanphan! I need No 14 but i have many accordion blocks in the site. it would be very helpful if there is a way for a specific section or block. also when I edit the size of the image it doesn't change in all but only in one accordion block You can add accordion-block id before selector #accordion-block-id li:nth-child(1) .accordion-item__description:before use this tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff 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
LarryAP Posted October 31, 2023 Share Posted October 31, 2023 Hi @Tuanphan Thanks for this. I had tried changing the word contain to a value, the image changes size no problem but is still being cropped. Images attached. I'd appreciate it if you could tell me what I'm doing wrong, thanks. Laurence Quote Hi I'm changing the PLUS icon to an image but can't see how to change the image size. I can make it bigger but the container size is cropping it I think. //Change Accordian Plus/Minus (+/-) to custom icon// /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } You can change contain to a specific value, for example: background-size : 100px; Link to comment
tuanphan Posted November 3, 2023 Author Share Posted November 3, 2023 On 10/31/2023 at 11:32 PM, LarryAP said: Hi @Tuanphan Thanks for this. I had tried changing the word contain to a value, the image changes size no problem but is still being cropped. Images attached. I'd appreciate it if you could tell me what I'm doing wrong, thanks. Laurence : 100px; Can you share link to this page? I can check code easier 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
LarryAP Posted November 3, 2023 Share Posted November 3, 2023 1 hour ago, tuanphan said: Can you share link to this page? I can check code easier Yes: https://www.alliancepackaging.ie/branded-products Do you think it could be conflicting code? Thanks for your help on this. Link to comment
tuanphan Posted November 6, 2023 Author Share Posted November 6, 2023 On 11/3/2023 at 3:41 PM, LarryAP said: Yes: https://www.alliancepackaging.ie/branded-products Do you think it could be conflicting code? Thanks for your help on this. The parent container has a limit 30px x 30px width + height You can add code to increase this .sqs-block-accordion .accordion-icon-container { width: 300px !important; height: 300px !important; } then change background size to contain is enough :not([data-is-open="true"]) .plus { background-image: url(https://images.squarespace-cdn.com/content/5e2868d5cfb9407f12460366/ef8e49c5-d627-4702-a11e-59858a99f715/More+Info+Wit+Arrow+Image.png?content-type=image%2Fpng) !important; background-size: contain; background-repeat: no-repeat } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment