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

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

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>

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.

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 ----> 👇

Hi everyone,

Thanks for replying, I've solved this now!