groundsy Posted May 17, 2023 Posted May 17, 2023 Hi everyone, I've applied some styling to the accordion on the 'Air Roasting' page, but I now need another accordion on the Air-Motion 3 page, under Roasters with plain default accordion styling. I've added the accordion on the Air-Motion 3 page, but it's picking up the styling from the 1st accordion, which I don't need on this page. Is there a way to apply this styling only to the accordion on 'Air Roasting' page? .accordion-item__click-target::before { background-size: contain; content: ''; height: 40px; margin-right: 10px; width: 40px; } .accordion-item:nth-child(1) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/4ed3b787-0a03-4c60-adb8-0d5091a25d19/clock_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(2) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/eb89036b-f4b1-4a6c-9aee-0a3dd24c7b6d/recycle_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(3) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/faa4b451-ea61-49d7-98d3-111a165898f4/temp_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(4) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/ce9ff8e1-dca8-4cda-9990-05b4cff3a04e/cog_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(5) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/68a415eb-3c10-4f45-a1e6-2ae6bcb68a76/finger2_icon.png?content-type=image%2Fpng); } Site is https://vanilla-snail-g56h.squarespace.com/ Password for the site is AirR0aster23
Solution Ziggy Posted May 17, 2023 Solution Posted May 17, 2023 4 hours ago, groundsy said: Is there a way to apply this styling only to the accordion on 'Air Roasting' page? Yes, you need to target the CSS to the specific accordion block. You can find block, section, and page IDs like this: https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71 and apply the block ID at the start and wrap the rest of the CSS within curly brackets like this: #block-yui_3_17_2_1_1684245629356_5788 { *** Current CSS here *** } and here it si put together and targeted to the accordion on the Air Roasting page: #block-yui_3_17_2_1_1684245629356_5788 { .accordion-item__click-target::before { background-size: contain; content: ''; height: 40px; margin-right: 10px; width: 40px; } .accordion-item:nth-child(1) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/4ed3b787-0a03-4c60-adb8-0d5091a25d19/clock_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(2) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/eb89036b-f4b1-4a6c-9aee-0a3dd24c7b6d/recycle_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(3) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/faa4b451-ea61-49d7-98d3-111a165898f4/temp_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(4) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/ce9ff8e1-dca8-4cda-9990-05b4cff3a04e/cog_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(5) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/68a415eb-3c10-4f45-a1e6-2ae6bcb68a76/finger2_icon.png?content-type=image%2Fpng); } } Hope that helps! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
groundsy Posted May 17, 2023 Author Posted May 17, 2023 Thanks for your help @Ziggy that worked perfectly! Ziggy 1
Ziggy Posted May 17, 2023 Posted May 17, 2023 8 minutes ago, groundsy said: Thanks for your help @Ziggy that worked perfectly! No problem, thanks for marking my post as the solution. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment