Trawww

Thank you, I tried to implement the HTML and CSS code with the javascript from you on the website, but unfortunately it still does not change the color of the text when scrolling. In addition, it breaks all the page relationships of other images and text. HTML: <h2>Scroll ...</h2> <div class="wrap"> <div class="wrap-container"> <div>Silky<span>Silky</span></div> <div>smooth<span>smooth</span></div> <div>animation<span>animation</span></div> <div>is<span>is</span></div> <div>the<span>the</span></div> <div>hallmark<span>hallmark</span></div> <div>of<span>of</span></div> <div>any<span>any</span></div> <div>library.<span>library.</span></div> <br> <div>Silky<span>Silky</span></div> <div>smooth<span>smooth</span></div> <div>animation?<span>animation?</span></div> <br> <div>GSAP<span>GSAP</span></div> <div>has<span>has</span></div> <div>you<span>you</span></div> <div>covered.<span>covered.</span></div> </div> </div> CSS: body{ margin:0; background-color:grey; height: 3a00vh; } h2{ margin:20px; font-family: sans-serif; color:green; } .wrap{ margin-top: 50vh; display: flex; justify-content: center; } .wrap-container { max-width: 950px; } div{ position: relative; font-family: sans-serif; font-size: 36px; font-weight: 600; text-align: center; } div { display: inline-block; } span{ position: absolute; width: 0; height: 100%; color: #0fd10f; left: 0; overflow:hidden; text-align: center; }

no, I have not yet declared these external libraries, how can I do that?

but since it did not work I have removed this one

All codes I have taken over from CodePen: https://codepen.io/akapowl/pen/zYRqbwm I tried to put the HTML code in the code block, the CSS code in the CSS editor and the javascript with the script brackets in the header so the code injection

I would like the font color to change when scrolling like here : https://codepen.io/akapowl/pen/zYRqbwm unfortunately i can't get the code to work in squarespace. can someone help me ? here is an example page where i wanted to put the code on the home the password is hafenraum https://azalea-grey-ekbk.squarespace.com/

Sorry, I meant to change the font color in the footer for different pages

The color is not the problem I get changed from the footer but the title color remains the same no matter which code I use

But the font colors must then also be adjusted and that does not work. Once white font, once black.

once in css without the style brackets and then in the page code injection with the style brackets

sorry, https://daffodil-cheetah-ans4.squarespace.com/ PW: hafenraum

Can I change the text color in the footer on a page? I have ported the following code, but nothing changes the text color: <style> /* footer text */ footer.sections p { color: #ffffff; } /* footer link */ footer.sections a { color: #ffffff !important; } /* footer socials */ footer.sections .sqs-svg-icon--wrapper { border-color: #ffffff !important; } footer.sections .sqs-use--mask { stroke: #ffffff !important; } </style> I would like to have the white font color on one side and a black on the other

thanks that works but now I can not make the height of the button smaller unfortunately not even with the code #block-ae3af55833c37141eb3e .sqs-block-button-element { padding: 5px 10px; }

I have two buttons under half of an image and want to position them exactly in the center of the images. Can someone help me? site url : https://daffodil-cheetah-ans4.squarespace.com/ PW: hafenraum

I have a problem with a code: I want to display a white font in the mobile version in black. But only from specific blocks. @media screen and (max-width: 648px) { #block-473193d35c589c679db0 p2 { color: #c2efff !important; } } Why can I change the H2 with the code, but when I want to target the p or p2, the code does not work

https://turbot-salamander-tjdh.squarespace.com/hotel-1 PW: HR123 /hotel-3-1, /hotel-2, /hotel-3 are working

Hello, what could be the reason that the same code works on two subpages and on the third subpage my menu is smashed. (see pictures, with and without code) I used the following code: <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> $(document).ready(function(){ $(".header-title-logo a").attr("href", "hotel-2"); }); </script>

Hello, I have selected a solid header for my test page in the website settings. Can I change the color of this header background from page to page? For example, on one page a blue navigation header, on the other page a red one.

Thanks it helped me but the problem is that always a section is displayed. And I want to open exactly this (one) section with the button but it is open.

Is there a way where you can expand and collapse page section in Squarespace. So maybe with a button click the section can be displayed? Or in an Accordion show a page section. My idea is to open a menu or the Squarespace Menucard with a click below it or to display it in an accordion.

Hall together I used the code from @Creedon and it works great. The problem is that in the mobile menu only the button is shown in one language and not in the other language. Website: https://cricket-megalodon-8kgf.squarespace.com/ Pw: summer123

Hello all, I have created a sample page in three languages. With the flags I can switch between the languages. Is there a way to display them in a dropdown ? Code injection -> footer -> <!--En/Es/De--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'en'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "es") { $('a[href="/"]').attr("href", "/es/inicio/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); }); </script> </script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script> /*setup language switcher with flags*/ $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/es/inicio/" class="lang-es"><span class="flag-icon flag-icon-es"></span></a> <a href="/de/Startseite/" class="lang-de"><span class="flag-icon flag-icon-de"></span></a></div>'); </script>