adifederico

Looks like the blue your looking for is: hsl(208, 42%, 30%). So you can write the code like this to get that blue. .header .header-announcement-bar-wrapper:hover { background-color: hsl(208, 42%, 30%); /*can change this to any color*/}

Give this a try. .header .header-announcement-bar-wrapper:hover { background-color: var(--siteBackgroundColor); /*can change this to any color*/ } .header-nav-folder-content { margin-top: 40px; }

A good spot to dabble with code is w3schools.com. That is where I started. You can see how a basic accordion is coded here: https://www.w3schools.com/howto/howto_js_accordion.asp . I have also gone ahead and taken this example and set it up in the style you are looking for hope this helps. Just copy and past this code in a code block. <style> .custom-accordion { border-bottom: 1px solid black; border-top: 1px solid black; border-left: none; border-right: none; background-color: white; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; outline: none; font-size: 15px; transition: 0.4s; margin: 5px 0; } .custom-accordion span { color: #414344; padding-left: 10px; font-size: 17px; } .custom-active, .custom-accordion:hover { background-color: white; } .custom-accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .custom-active:after { content: "\2212"; } .custom-panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="custom-accordion">01<span>Who It's For</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">02<span>How To Use</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">03<span>Ingredients</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="custom-accordion">04<span>Why Subscribe</span></button> <div class="custom-panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu dui vivamus arcu felis bibendum ut tristique et. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Leo vel fringilla est ullamcorper eget. Augue ut lectus arcu bibendum. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Nunc lobortis mattis aliquam faucibus. Urna molestie at elementum eu facilisis sed. Turpis egestas maecenas pharetra convallis posuere morbi leo. At urna condimentum mattis pellentesque id nibh. </p> <script> var acc = document.getElementsByClassName("custom-accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("custom-active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>

Please see the image I am attaching. Shows where the check box is and the trash section button.

You can delete a saved section individually within sections and you can remove a saved section from your saved library by editing a page -> create a new section -> go into you saved section -> check which saved option you wish to delete -> click the garbage can on the bottom. That should remove saved sections from your saved library.

This save a reuse feature looks to be live now. It looks like if you have used this feature in the past during testing times and saved work, it is still saved and available for you to use!

I have saved a few sections also. Not sure if they will come back saved or if I will have to add back.

When I talked to Squarespace live chat they told me this: can't re-activate the option at this time, it is something we're looking to have released to general users soon, so keep an eye out for a similar tool coming in the near future 🙂

I have talked to Squarespace and they say I may have been temporarily able to access a new feature they are not ready to roll out. So, as nice as this feature was. I only got to use it for about 3 hours. But it worked very well for reusing sections.

Earlier today 12/1/2022 I had some option in my add section area and in my section edit options to save and reuse sections. I used it a bit this morning and it was nice but now its gone. Where did it go?

Give this code a try. @media screen and (max-width: 767px){ img.ProductItem-gallery-slides-item-image { object-fit: inherit !important; } }

These are the results that code gives me. Did you add this code in a style tag?

Give this code a try. .records_list ul li a, .records_list ul li a:visited { display: flex !important; } span.image.lazyload_wrapper.lazyload_initialized.lazyload-fallback-dimensions.loaded { order: 2; }

This method also worked for me. @media screen and (max-width: 640px){ .sqs-layout [class*="sqs-col"] { float: left !important; } .col.sqs-col-3.span-3 { width: 47% !important; } }

You will need to use the pseudo class with some custom CSS to achieve this. a.sqs-button-element--primary::after { content: '\2192'; padding-left: 10px; }