A1Protocol Posted February 10, 2022 Share Posted February 10, 2022 Thank you so much! I have a small issue. The icons I use are now in EVERY accordion block throughout the site. How do you target a specific page (my homepage) https://www.thesoaresprotocol.com/ (the icons also appear in press and projects) The code I used: Quote /* 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://lh3.googleusercontent.com/r_-IMQ7bH3NxSJLZ7x-S3LcdBcSOb9GJx3scBGyM72Ffd2VorGYlghWj76Q8AL22Byk2gruAUeMCFJ7kz7w3vqXet5DRm31jshlhJwFTX8YgMuvAjp0OF9tkRZcuGBvSUeuuNw_YNVHzQhYVeVeTO0mJRiXwzANJ_bPFVJKju6d3e3LYV0g7hRNdBdTRm-nQtIGipdRPP3J_3mqPeQImYyuq4F28aTVYIZiT9tHJkBbk1pRWySnpTRFrZb3hD7MyTuxb_QfKzTI4OESTtP0YTYtisXvCO8t5lnmvL8nHbGiXSf20D1y8VjurqElw5Tiwb4C6QrIPOEV7P5pgf09EZxiB-iGipNKkHEte4R44bxlcbj1QWHtKCXL8CPtIjhrW0-hIAVZPvpyxGzngqLZEhXx5t_-Mrz4QtclB_HJ4EpAWocJbSjPk4rYR3MavNXQ0GU2jghue81KrfCNi9EVWuiq035Ht6gqAag9gn2tzsO2FAxjaLe6ypQFjK7YMRQLjFWMmwr0ROwPhC5metKH1Kpx2miLm76I8NEKAWVrlKu4hss5KkxajRFAPTjiVvljuxDU9uVvsBl7M3UhR-XAYG0KPWCHs99ABfEgN5f9NKEi1jUAu6QQrDT9kq3OqNnyjHNkn9iIynIZ8BfrfvE2mbEUm3lBhKpTbBFh5c19KqaZQx2pHX4XUaROoTlPyFV9k685r_N4cW2S71buMGPwi2gp0Rw=s512-no?authuser=1); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://lh3.googleusercontent.com/_lsgDhGpRDjUWOVFElBP7oMy1BgUdvO9pBg4De4NNjEkC8KggKOCZVu4gTX5pGbqQDhJJjn8pbBykUep4kqx9YH6oFViIDOhQbypYfwyuRPHDCjVNuhHCf7t_vySojoJw71rbJz3I5KwOOgAVtvEsySO4OxeN23pCmKAXj-GNlupSQLWOMjsdeFJPtb8hRjbdHkh2WeRz5Qwv-3yzZKXC4dd6CWGSeSw6uUiMMasMp4za-xLedNDRdJ5P1Pf_IwtasbZofTWCLrLBCrN0FG-SWlcAhK_5i2FZLFvtA8eV8EXZS6Hm0Q1DGU_pTCgdPrzrplQ7TtwbMzJZMbVqgUtfKKhZLNTerYjqcJLzSVo34t4ftc2GUOqfSHkY4UnPIOaVP13uoqg7ct9uwX6EF6PWa8Jmkl4-BhFyAzRJ7XyZcVdE2O4POd0_708oSMAsdC2fVB6zBsGaTn6vFGNK11KDOyFHCbsc7FywtD1a_K-99w1jidTBktBJWrmauU-zoNNx3KacbKKSMFy3__UIWqkljDfAwnBZyEFXWwGRf_JBMe6BDrMDJ4gY4ujeLYSXASyZKutc2LdC-KUDORr3jX0G4eAYHjN7qA0s9jTaj28ZjSG5uhRmqPOCwFYxM3wyycvFv4Ciifqz1NE7pOt0bqMtOWtnwi64yjn7sXqAg0SKNK51DHhQxquBQe5SUoLWZgYoGPpeQbc3n6QHVg1p6jjcbqqmQ=s512-no?authuser=1); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://lh3.googleusercontent.com/MKA2ni9HX8MqtnAbaOq5CtaU6Tco5T5OZ8GqCbxZrLHm4alq-es2CZOa7xb7HoWysmnEXu9ijKk5Y00H7V6z1xeP_9IzjbxzTt3Ttmrc7fVnnNCRZQkdvl-4mTV2YxHXOJ7oX-6bpBiGoEnEvUwbiiYp-phCSGKXNC0oNCcK5-_1m2lHldBDvTqtHDvihAID9iDlCalRV0xDDNUxott9DERc9iUc6sLu1M-5NAW5TEFVsXRbWJgvW4s1wRqoQ7dlAdKZrSREKR-H-k6Km55dBXsHOIOK7eNolH1RnhqkIoYNkXvKt3EwE9kLUBcQTV9inpaalJK8FVBdnKNrcpYIxr70hb6PoD7e5IdW2yLBlUdHOeu8S1dE9k2AMuu19ptTdxht3zDVHAE0Ph8SEJVE24kb3-8oIveY_t8jHzwYEVmgU8w9ST55QSdM7v5z9NpIjmDdLOr6nOzgB6f2NbwVTbkLmGhfUctKo91CKsKSmlNXy3M8-NL8sjQkhtw4kVP1ZuA3PO5TzDCKxRMKQblYGSLn2Lr3-8eSqCqyLWVhOd11HmTRdscmCZUDassKfyPXx2stNSdnNX0LNLz_pYl9B97VmaiQGVF_RqO6McxoUTmqWpg6XIi0_KttwWTN_xmPGmmJ83-RmGvPx2PT-IQs3eqqGxJN8cxo3Qtwca9sDfUcPP9PlWBXccHYIjqwvXH71kj1aVVajy4WfUo5klCnJONSqw=s512-no?authuser=1); } li.accordion-item:nth-child(4) .accordion-item__title:before { background-image: url(https://lh3.googleusercontent.com/dXtSZjh8-qVIouVXD1E1DRy_4xn-dF41VXnRwYJ9uRlFu-Fu5E2bGpESiON0r0_tRYk3cpCR_SAUzrFrH0EJEgkBxIBWEcrDENFEmxkrLJ_ZcHJIHusYrmmDe17fX64PvrkKjFT5OpmeFY9qZKy5frSLTif43L-D707rBnmSpQ1__E4K62lqfbuU0n5d5rJUouPwO5zyLrGHwN2T5bsF1aVxuv3DU6qCPCqnT5ydN923xLQjvQa40TfrWSHggKOu_MJ0I7qilkjl5zBuGAyXcdFVKT3ijyMSOkr3WW40ed_vhKpzk03mOMdiSxBesUxT26mcKnZF1UXCF_bv5FvXwAiPbfHLEd3I_K9cBRYp5jT496fGfR-fJw7OYnHo0xPwLyzL7ISMyJSoJd-usMRB2O4rRiHAICjFPcMyMQNmHDR55ykQKiVS5wXpxMAPCQDz7VSUmARZPzyJjIse-Zti7dwjpEsRCRIlQ9XiFcKhsZSAbLGPe0iAJZ0hNhvk9kT-D3yMPUE02FS7jU-ifBpqgFvLILGHoaoN8Kvz9XHTuqyNvCSZWsotshL6ANM1JQu5XU9QRSzF0Axeyj8YTJ9cXdutKjvnyGZr5JfhyVE8hJl0-RaAliz7bjkoFpt3IEc2vL7NQE-X8uj0v2vyKwJoHvUxZuCPPYu7KKK-0ood7KHd4nB_BBy7hrF1nPpQk5q5XDKwbi7y6dvzZTwMNrWkkyZ5Lg=s512-no?authuser=1); } Thank you. Link to comment
creedon Posted February 10, 2022 Share Posted February 10, 2022 3 hours ago, A1Protocol said: The icons I use are now in EVERY accordion block throughout the site. You can add the homepage class to the beginning of your rulessets. .homepage li.accordion-item .accordion-item__title:before { Let us know how it goes. A1Protocol 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
KwameAndCo Posted February 10, 2022 Share Posted February 10, 2022 Great work as always! Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. You can also thank me or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
A1Protocol Posted February 10, 2022 Share Posted February 10, 2022 47 minutes ago, creedon said: You can add the homepage class to the beginning of your rulessets. .homepage li.accordion-item .accordion-item__title:before { Let us know how it goes. Thank you. Impeccable. I like this too because it allows us to only apply specific changes to a homepage menu for instance. creedon 1 Link to comment
Beggars Posted February 17, 2022 Share Posted February 17, 2022 (edited) I'm looking to use the accordion block but when it expands, the background stretches. wanted to know how can i go about disabling that featuring. site url: https://contrabass-gecko-h8z7.squarespace.com/lyrics/ password: helpmeplz Edited February 17, 2022 by Beggars needed to add for users to see Link to comment
creedon Posted February 17, 2022 Share Posted February 17, 2022 14 minutes ago, Beggars said: when it expands, the background stretches. 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. Beggars and tuanphan 2 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
Beggars Posted February 17, 2022 Share Posted February 17, 2022 site url: https://contrabass-gecko-h8z7.squarespace.com/lyrics/ password: helpmeplz Link to comment
riri Posted February 18, 2022 Share Posted February 18, 2022 Hi @tuanphan thank you for this it's so helpful 🙏 In the unordered list, is it possible to indent the second line of text so that it aligns with the first line? Link to comment
creedon Posted February 18, 2022 Share Posted February 18, 2022 (edited) @Beggars I don't think you're going to get a satisfactory effect using the section background image feature. It's not setup to handle repeating an image so it basically is cropping or stretching the image as you've seen. Please see Page Section Background Image Repeat which may work for your need. Let us know how it goes. Edited February 18, 2022 by creedon 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
tuanphan Posted February 18, 2022 Author Share Posted February 18, 2022 (edited) 8 hours ago, riri said: Hi @tuanphan thank you for this it's so helpful 🙏 In the unordered list, is it possible to indent the second line of text so that it aligns with the first line? I think I solved a similar case in previous pages. Can you share link to page in screenshot? We will try checking it again Edited February 18, 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
OperationGreenThumb Posted February 24, 2022 Share Posted February 24, 2022 On 1/28/2022 at 12:25 AM, tuanphan said: Can you share link to product where you added accordion? Thank you On 1/28/2022 at 12:25 AM, tuanphan said: Can you share link to product where you added accordion? Thank you I looked at the link you sent and when I go to find the URL slug on my shop all I get is /shop (image attached). I don't know how to give the URL of the exact page how do I do that? Link to comment
creedon Posted February 24, 2022 Share Posted February 24, 2022 2 hours ago, OperationGreenThumb said: I don't know how to give the URL of the exact page how do I do that? Please see Sharing URLs from your site. 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
designssllc Posted March 4, 2022 Share Posted March 4, 2022 Can you rotate an accordion block and have it open out to the side? Thanks! Link to comment
tuanphan Posted March 6, 2022 Author Share Posted March 6, 2022 On 3/5/2022 at 6:30 AM, designssllc said: Can you rotate an accordion block and have it open out to the side? Thanks! Do you have an image/mockup/example? We can help 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
creedon Posted March 6, 2022 Share Posted March 6, 2022 (edited) On 3/4/2022 at 3:30 PM, designssllc said: Can you rotate an accordion block and have it open out to the side? Not easily if at all. Let me explain. I tried just simply rotating a accordion block. It rotated and seemed to function as far as toggling open/close state. That means the code that drives that part of the effect wasn't broken. What was broken was all the spacing and smooth open/close effect. Here we see a normal accordion block. Now here is that block rotated. accordion rotate.mp4 As you can see it doesn't function properly visually. I assume that is because the visual effect elements were designed to function in the vertical plane not horizontally. Could the visual effect part of the accordion block be altered to function horizontally? Perhaps. But with all the fiddling about you may be better off finding a piece of code that was designed to work how you want from the beginning. If you did go with altering an accordion block there is a good chance it would break when SS made changes to the structure of the block. Edited March 8, 2022 by creedon Summit227, designssllc and hilary 3 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
designssllc Posted March 8, 2022 Share Posted March 8, 2022 thank you for the insight! I decided to alter my design. I appreciate the help! creedon 1 Link to comment
chrisshaddock Posted March 8, 2022 Share Posted March 8, 2022 The accordion block can be so much more if I could choose heading and paragraph styles in the design controls. Link to comment
creedon Posted March 9, 2022 Share Posted March 9, 2022 @chrisshaddock The accordion block is fairly recent to SS. If you want more features please contact customer support and register your feature request(s). 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
ErinO Posted March 9, 2022 Share Posted March 9, 2022 On 11/8/2021 at 3:47 PM, tuanphan said: 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 /* 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 */ } #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; } Wrote by @tuanphan Is there a way to change all my accordion font size? I have accordions for all of my products and they are all set to Heading 3, I want them to be normal. Do I have to change it on every product? Link to comment
tuanphan Posted March 13, 2022 Author Share Posted March 13, 2022 On 3/9/2022 at 12:27 PM, ErinO said: Is there a way to change all my accordion font size? I have accordions for all of my products and they are all set to Heading 3, I want them to be normal. Do I have to change it on every product? Possible with a code. You mean Accordion Title or Accordion Content? 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
afinta Posted March 22, 2022 Share Posted March 22, 2022 Is there any way to style one word in an accordion title? Link to comment
samantha4 Posted March 22, 2022 Share Posted March 22, 2022 @tuanphan Thank you for creating all this code! I am using #9 (accordion titles - add line break). Because I have added a few sentences I no longer like where the icon sits. Is there a way to align it to the top of bottom of the container? You can view my site here: https://thegreeneschool.squarespace.com/vision-mission password: letstalk Link to comment
tuanphan Posted March 23, 2022 Author Share Posted March 23, 2022 11 hours ago, afinta said: Is there any way to style one word in an accordion title? Possible. I just coded this a few days ago. See a demo: https://thung.squarespace.com/accordion?noredirect (Pass: abc) First, edit Accordion Title to this Accordion Item 1 <span style="color:red;">Red text</span> Next, add this code into Page Header (Page where you added accordion) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("span.accordion-item__title").each(function(){ $(this).html($(this).text()); }); }); </script> 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
tuanphan Posted March 23, 2022 Author Share Posted March 23, 2022 5 hours ago, samantha4 said: @tuanphan Thank you for creating all this code! I am using #9 (accordion titles - add line break). Because I have added a few sentences I no longer like where the icon sits. Is there a way to align it to the top of bottom of the container? You can view my site here: https://thegreeneschool.squarespace.com/vision-mission password: letstalk To align plus to top. Add this to Page Header (page Where you added Accordion) <style> button.accordion-item__click-target { align-items: baseline !important; } </style> samantha4 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
tuanphan Posted March 23, 2022 Author Share Posted March 23, 2022 #9 (Update) If you use a Business Plan or higher, you can use this approach. First, add to Page Header (Page where you will use accordion) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("span.accordion-item__title").each(function(){ $(this).html($(this).text()); }); }); </script> <style> span.accordion-item__title span { display: block; } </style> Next, edit Accordion Title, use this format Patrick Trojer, PhD <span>President & Chief Executive Officer</span> result 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