tuanphan

The code missing some symbols

It should be
/* Decrease height */ .sqs-announcement-bar-text { padding-top: 0px !important; padding-bottom: 0px !important; }  

You can try this to Website Tools > Custom CSS
@media screen and (max-width:991px) { .header-display-desktop { display: block !important; position: absolute; right: 15vw; z-index: 99999999; } .header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger { display: none; } .header-dislay-desktop .header-actions.header-actions--right { display: flex !important; } div#multilingual-language-picker-desktop {} .header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop { display: flex !important; } }  

@tuanphan something is a little glitchy with the code, I'm not sure what. But Ghost Plugins does offer this Mood Board Plugin for $30. 

You can use Accordion Block, then add this code to Design > Custom CSS to show accordion on Mobile Only
/* hide accordion footer on desktop */ @media screen and (min-width:768px) { footer.sections .accordion-block { display: none; } }  

Use this code under
<style> #block-yui_3_17_2_1_1723824375254_28908 a { text-decoration: none !important; } </style>  

I think you can consider move language switcher next to burger icon. What do you think? I can give some CSS to do this

Thanks @tuanphan for looking at it. I opened it up on another browser directly without going through the Squarespace CMS and also noticed it's loading fine. I guess it may just be an issue when working in the CMS only? Anyways, I'm happy it's loading fine for you 😁

Change code to something like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <style> .m-scroll { display: flex; position: relative; width: 100%; height: 90px; margin: auto; overflow: hidden; z-index: 1; } .m-scroll__title { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: flex-start; width: 100%; height: 100%; white-space: nowrap; transition: all 0.7s ease; } .m-scroll__title > div { display: flex; animation: scrollText 40s infinite linear; } .m-scroll__title img { margin: 0 20px 6px; } .m-scroll__title h1 { margin: 0; font-size: 1.7rem; color: #000; transition: all 1.4s ease; display: flex; } /*div:hover { animation-play-state: paused; }*/ @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } </style> <script> const words = ['WORK HARD PLAY HARD', 'WORK HARD PLAY HARD'] const imgUrl = ['https://i.ibb.co/TR6zRRj/Untitled-200-x-200-px.png','https://cdn.pixabay.com/photo/2023/08/07/19/47/water-lily-8175845_1280.jpg']; $(document).ready(() => { const textBlock = $('.sqs-block.marquee-block.sqs-block-marquee'); const htmlWords = ` <div class="m-scroll"> <div class="m-scroll__title"> <div> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl[0]}"/>`).join('')} </h1> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl[1]}"/>`).join('')} </h1> </div> </div> </div> `; $(htmlWords).insertAfter(textBlock); $(textBlock).remove(); }) </script>

You can Google with this keyword, then send me a Codepen link, I can customize it to make it work on Squarespace


 

Can you share link to page where you added it? I can check easier

Some custom code to change Header Logo to another logo on
One Page Desktop - Mobile  Collection Page only (Blog/Product/Event) Cart Page Search Page 404 Page Before Scroll - After Scroll ... These code for 7.1. If you use 7.0, or the code doesn't work, just comment site url, we will check & give exact code.
In the code, I used a random image on Pixabay, you can upload it & replace with your logo image url. #1. Change Logo on One Page
Edit Page > Add a Code Block > Paste the code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #2. Change Logo on Desktop Only
Insert code to Custom CSS
@media screen and (min-width:768px) { header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } } #3. Change Logo on Mobile Only
SS has an option to do this, so no need to use code

#4. Change Logo Before Header Scroll
Insert code to Custom CSS
header#header:not(.shrink) img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #5. Change Logo on Scroll
to Custom CSS
header#header.shrink img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #6. Change Logo when Overlay Menu/Burger Menu is Open
body.header--menu-open header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #7. Change Logo when Overlay Menu/Burger Menu is Close
body:not(.header--menu-open) header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #8. Change Logo on Blog Page (List + Detail post)
body[class*="type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #9. Change Logo on Blog List Page
body[class*="type-blog"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #10. Change Logo on All Blog Posts
body[class*="type-blog"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #11. Change Logo on Specific Blog Posts
Edit that post > Add a Code Block > Use this code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #12. Change Logo on Shop/Category Page
Insert to Custom CSS
body[class*="type-products"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #13. Change Logo on Product Detail Page
body[class*="type-products"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #14. Change Logo on Some Specific Products
First create a tag with name: clg
Next, use CSS code
.tag-clg header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } (clg means change logo :-D)
#15. Change Logo on 1 Product
Edit Product > Additional Info > Add a Code Block > Use code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #16. Change Logo on Event Page
To Custom CSS
body[class*="type-events"] header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #17. Change Logo on Event List Page
To Custom CSS
body[class*="type-events"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #18. Change Logo on Event Detail Page
To Custom CSS
body[class*="type-events"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #19. Change Logo on 1 Event
Edit that Event > Add a Code Block in Event Description/Content > Paste this code
<style> header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #20. Change Logo on Cart Page
To Custom CSS
body#cart header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #21. Change Logo on Search Page/Search Results Page
Add to Settings > Developer Tools > Code Injection > Footer (or Website > Website Tools > Code Injection > Footer)
<script> if (document.location.pathname.indexOf("/search") == 0) { document.querySelector('body').classList.add('t-search') } </script> <style> body.t-search header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } </style> #22. Change Logo on 404 Page
body#not-found header#header img { content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg); } #23. Invert Logo Color
Colored Logo to Black
header#header img { filter: brightness(0) invert(0); } Colored Logo to White
header#header img { filter: brightness(0) invert(1); } To apply to specific pages, you can add pre-fix, similar code in #1 to #20
#24. Invert Black Logo to White (One Page)
<style> header#header { filter: invert(1); -webkit-filter: invert(1); } </style> If you use Business Plan or higher, add it to Page Header Code Injection
If you use Personal/Basic Plan, you can edit page > Add a Code Block (anywhere on page)
#25. Invert White Logo to Black (One Page)
Same code #24

Hello @Jorge_LRE. Hope you are having a great day! Let me help you out.
Please follow these steps:
Navigate to Pages > Website Tools > Custom CSS. Paste the following code into the CSS editor. /* Summary title bold */ a.summary-title-link { font-weight: bold; } Please let me know if that works, thanks!

Never mind, I managed to apply it to all my items videos, thank you so much!!!!

Tutorial link doesn't exist. Can you check it again?

Use this code to Website Tools (under Not Linked) > Custom CSS
@media screen and (max-width:767px) { div#block-yui_3_17_2_1_1702838154093_6896 { .native-video-player.video-player { padding-bottom: 120% !important; } .video-player .plyr video { object-fit: cover !important; } }}  

Use this CSS code
@media screen and (max-width:640px) { body.homepage .Parallax-item:first-child iframe { width: 100% !important; height: auto !important; left: 0 !important; } section#welcome { min-height: unset; height: 200px; } body.homepage .Parallax-item:first-child figure { bottom: 0 !important; } }  

Add to Design > Custom CSS
/* hide video homepage on mobile */ @media screen and (max-width:767px) { body.homepage .sqs-video-background-native__video-player.video-player { visibility: hidden; } }  

You can use a CSS code like this to Website > Website Tools > Custom CSS
@media screen and (max-width:767px) { div#block-yui_3_17_2_1_1654723628836_4556 { max-width: 100px; margin: 0 auto; } }  

Thank you very much Tuan, this has worked perfectly. I have tried to 'buy you a coffee' but the app does not like either of my email address - it keeps rejecting them as not valid email addresses. I have no idea why. I have tried 4 times. Do other people have the same problem? Is it because it is a .co.uk email address? I am mystified and sorry that I can't express my gratitude in a more concrete manner. Kind regards, Julie

First, change accordion item, from this
your current title accordion to this
<a href="https://google.com">your current title accordion</a> Next, add this code to Website > Website Tools > Code Injection > Footer
<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>  

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
If you use a Business Plan or higher, you can use another approach in this comment
/* 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 */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image 
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01

Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result

If adding 3 images, doing this



and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url 

highlight the text url > Add same image url (enable Open in New Window)

then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>  
#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; } #16. Change style of a word on Accordion Title
See this comment

Wrote by @tuanphan

You mean remove this panel?

I will try checking again in Saturday, 14 Sep
A few weeks ago a member contacted me with the same issue, and it seems to be a time zone difference.

Hi! I am also trying to add Sharethis buttons underneath my add to Cart button. I'm injecting the main script onto every page, and then I created a code element in the footer. I'm using the following javascript, which I am not sure I've written correctly.
A product page you can view is located at: https://burlybottomdesigns.squarespace.com/shop/p/vinyl-stickers-bondage-bear
<script> $(document).ready(function() { $('<div class="sharethis-inline-share-buttons"></div>').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper'); } </script> Thank you in advance. - Chris

@g2creative2024  Hi! You can add this code under Websites > Pages > Website Tools > Custom CSS 
@media only screen and (max-width: 640px) { section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background img { opacity: 0 !important; } section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background { background-image: url('https://images.squarespace-cdn.com/content/66db7a6d7845a054f30f1833/87c975f8-f478-475f-a551-6b5d3a4ce36e/Conventus+Capital+Mobile+Cover.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } }