SBeneke

Oh my god that works, brilliant! Thank you so much!! 😀

Hi @tuanphan, jumping on this thread as I have the same issue and it's driving me mad! Here is a link to a product page I'm designing, where I've added the "View Demo" button in the Additional Information field: https://www.westcoastdigital.co.nz/website-templates/p/summer-template-squarespace-71-yoga-teacher-website If you can help me with code that would place it alongside the "Add To Cart" Button, that would be brilliant! Thanks, Sam

Hi everyone, Thanks for replying, I've solved this now!

Here is the code I put into the code block in the homepage banner which includes the prompt to change the font to white: <div class="container"> <h1 align="center"><font color="#FFFFFF"> DIGITAL MARKETING EXPERTS WITH A DATA-DRIVEN RECORD<br/> FOR INCREASING<!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["PAGEVIEWS", "SALES", "REACH", "ENGAGEMENT", "IMPRESSIONS", "LEADS", "CONVERSIONS"]'></span> </font> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 2000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 8); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 400; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script>

I recently upgrade from 7.0 to 7.1 with my website, and I am struggling to change certain pieces of text's font color to white, instead of black. I've tried custom css, adding code blocks, and editing the colour palette in the theme editor, nothing works. In the header image of the homepage, "West Coast Digital" is a text block, "Digital Marketing Experts With a Data-Driven......" is a code block with a typewriter effect in it. The Instance 2 screenshot is the testimonial section I put together, which is actually a summary block with blog posts creating the carasoul effect. But again, I'm unable to change to font color to white. The backgrounds are like they currently are because the site is live, so they're temporary until I can figure out the font color dilemma. Any help is appreciated. Kind Regards, Samantha