Jump to content

7.1 Template won't let me change text color to white with custom css or within code block

Recommended Posts

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

Instance 2.JPG

Instance 1.JPG

Link to comment
  • Replies 4
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>

Link to comment

Hi, let's tackle everything except the code block for now. Have you tried going to Site Styles (brush icon top right) -> Colors to change the corresponding text color for each of the element you are referring to? No code.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment

Edit: I think the main problem is your custom code are using deprecated syntax. e.g. align and font tag are deprecated (html4), so you might need to check all your custom code to make sure they work for html5.

 

This line, the style syntax is wrong. Change from

<h1 align="center"><font color="#FFFFFF">

to 

<h1 align="center" style="color: #FFFFFF">

Or you can change the font colour in this block, by adding color: #FFFFFF 

.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

Also, not sure if align="center" is working for you. 

 

If you can share a link to your website, can check easier.

 

If this has helped you out, let me know by marking as solution, or choose a reaction ----> 👇

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.