skip to Main Content

I’m using Squarespace 7.1 to build a site that includes a randomly generated quote in the footer. The quote is generated from a JS array when the page loads, reloads, or changes. The code works exactly how I want it to (I’ve tested it on CodePen, JSFiddle, and my Squarespace site), but I can’t figure out how to style the output.

I’ve tried styling the output through CSS and directly in the HTML container, but it only ever pulls the native style for the section of the page, which has the wrong color, alignment, and size for what I’m wanting the quote to look like.

Here’s the basic HTML code:

<div class="Quote"></div>

Here’s the JS code:

function ShowQuote()
  {
    var Quote = [
"<i>Where words fail, music speaks.</i> — Hans Christian Andersen",
"<i>Music is the language of the spirit. It opens the secret of life bringing peace, abolishing strife.</i> — Kahlil Gibran",
"<i>Music, once admitted to the soul, becomes a sort of spirit, and never dies.</i> ― Edward Bulwer Lytton",
"<i>Music produces a kind of pleasure which human nature cannot do without.</i> ― Confucius",
"<i>Music is the universal language of mankind.</i> ― Henry Wadsworth Longfellow",
"<i>Music, when soft voices die, vibrates in the memory.</i> — Percy Bysshe Shelley",
"<i>Music is healing. Music holds things together.</i> ― Prince",
"<i>There are not more than five musical notes, yet the combinations of these five give rise to more melodies than can ever be heard.</i> — Sun Tzu",
"<i>Music can change the world.</i> — Ludwig van Beethoven",
"<i>The true beauty of music is that it connects people. It carries a message, and we, the musicians, are the messengers.</i> — Roy Ayers",
"<i>The best music is essentially there to provide you something to face the world with.</i> — Bruce Springsteen",
"<i>Music is the great uniter. An incredible force. Something that people who differ on everything and anything else can have in common.</i> ― Sarah Dessen",
"<i>Love is friendship set to music.</i> — Jackson Pollock",
"<i>Music is an outburst of the soul.</i> ― Frederick Delius",
"<i>A great song should lift your heart, warm the soul and make you feel good.</i> ― Colbie Caillat",
"<i>Music is the divine way to tell beautiful, poetic things to the heart.</i> ― Pablo Casals",
"<i>Music is life itself.</i> — Louis Armstrong",
"<i>Music can heal the wounds which medicine cannot touch.</i> ― Debasish Mridha",
"<i>If Music is a Place – then Jazz is the City, Folk is the Wilderness, Rock is the Road, Classical is a Temple.</i> — Vera Nazarin",
"<i>Without music, life would be a blank to me.</i> — Jane Austen",
"<i>One good thing about music, when it hits you, you feel no pain.</i> — Bob Marley",
"<i>Music is the soundtrack of your life.</i> — Dick Clark",
"<i>Music expresses feeling and thought, without language; it was below and before speech, and it is above and beyond all words.</i> ― Robert G. Ingersoll",
"<i>The only truth is music.</i> — Jack Kerouac",
"<i>A painter paints pictures on canvas. But musicians paint their pictures on silence.</i> — Leopold Stokowski",
"<i>Music is what tells us that the human race is greater than we realize.</i> — Napoleon Bonaparte",
"<i>Music gives a soul to the universe, wings to the mind, flight to the imagination and life to everything.</i> — Plato",
"<i>Music is a language that doesn’t speak in particular words. It speaks in emotions, and if it’s in the bones, it’s in the bones.</i> — Keith Richards",
"<i>The world’s most famous and popular language is music.</i> — PSY",
"<i>Music is the tool to express life—and all that makes a difference.</i> — Herbie Hancock",
"<i>Music is forever; music should grow and mature with you, following you right on up until you die.</i> — Paul Simon",
"<i>Music is a great natural high and a great natural escape.</i> — Shania Twain",
"<i>Music is my religion.</i> — Jimi Hendrix",
"<i>Music is powerful. As people listen to it, they can be affected. They respond.</i> — Ray Charles",
"<i>People haven’t always been there for me, but music always has.</i> — Taylor Swift",
"<i>Music should be your escape.</i> — Missy Elliot",
"<i>Without music, life would be a mistake.</i> —Friedrich Nietzsche",
"<i>Live your truth. Express your love. Share your enthusiasm. Take action towards your dreams. Walk your talk. Dance and sing to your music. Make today worth remembering.</i> — Steve Maraboli",
"<i>The more you love music, the more music you love.</i> – Tom Moon",
"<i>Music is very spiritual, it has the power to bring people together.</i> — Edgar Winter",
"<i>We are the music-makers, and we are the dreamers of dreams.</i> — Arthur O’Shaughnessy",
"<i>Music can change the world because it can change people.</i> ― Bono",
"<i>Music is enough for a lifetime, but a lifetime is not enough for music.</i> ― Sergei Rachmaninov",
"<i>Music is the last remnant of the primal scream, the funeral dirge, and the wedding march. It is the light that keeps me out of the shadows.</i> — Corey Taylor",
"<i>Music is not take it or leave it; Music is life or death!</i> ― Joss Stirling",
"<i>Music will never go away, and I will never stop making music; it's just what capacity or what arena you decide to do it.</i> ― Dave Grohl",
"<i>I think music in itself is healing. It's an explosive expression of humanity. It's something we are all touched by. No matter what culture we're from, everyone loves music.</i> ― Billy Joel",
"<i>After silence, that which comes nearest to expressing the inexpressible is music.</i> ― Aldous Huxley",
"<i>Music is energy—a mood, atmosphere, feeling.</i> ― Kurt Cobain",
"<i>Music is the only thing I’ve ever known that doesn’t have any rules at all.</i> ― Josh Homme",
    ];
    var Pick = Math.floor(Math.random() * (Quote.length));
    document.write(Quote[Pick]);
  }
  
  document.addEventListener("load", ShowQuote());

For clarity, below are the CSS and HTML style codes I’ve tried, with no success.

CSS:

.Quote {
  display: flex;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: Normal;
  font-size: 1em;
  line-height: 1.8em;
  text-align: center;
  color: #1B1B21;
}

HTML (this attempt changed the entire div container to a p container):

<p class="Quote" style="text-align:center;color:blue"></p>

I’m hoping to get some assistance in how I can style the output from the array.

3

Answers


  1. When you use document.write(Quote[Pick]); you are not writing into your div but in the root document so your css is not applied on your generated html.

    Instead you should first select the div with document.querySelector and then add the html into it with innerHTML.

    function ShowQuote(){
        var Quote = [
            "<i>Where words fail, music speaks.</i> — Hans Christian Andersen",
            "<i>Music is the language of the spirit. It opens the secret of life bringing peace, abolishing strife.</i> — Kahlil Gibran",
            "<i>Music, once admitted to the soul, becomes a sort of spirit, and never dies.</i> ― Edward Bulwer Lytton",
            "<i>Music produces a kind of pleasure which human nature cannot do without.</i> ― Confucius"
        ];
        var Pick = Math.floor(Math.random() * (Quote.length));
    
        document.querySelector('.Quote').innerHTML = Quote[Pick]
    
    };
    document.addEventListener("load", ShowQuote());
    .Quote {
      display: flex;
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: Normal;
      font-size: 1em;
      line-height: 1.8em;
      text-align: center;
      color: #1B1B21;
    }
    <div class="Quote"></div>
    Login or Signup to reply.
  2. document.write should really only be used if you are generating the entire document yourself from scratch, if you use it on an existing document it will put all the stuff you write outside the document.

    <html>
    <!-- your page -->
    </html>
    ....code you write to the document...
    

    Ideally you will have an empty (or with default value) tag in your template to contain the quote. This tag should have something to identify it (a class name or unique id etc)

    You can then select that element and update the content with your new quote.

    // if your element has an id (footer-quote)
    document.querySelector("#footer-quote").innerHTML = "my new quote"
    
    // if you element has a class name (quote)
    document.querySelector(".quote").innerHTML = "my new quote"
    

    If your template does not have an element, you can add one.

    let quote = document.createElement("p")
    quote.setAttrbute("class", "quote")
    quote.innerHTML = "my new quote"
    document.body.appendChild(quote)
    

    With the second option you have to find the right location to insert the quote to fit properly in your template.

    Login or Signup to reply.
  3. document.write creates new content from your html and disregard all of your current tags, elements, styles, etc. You should use either innerText or innerHTML.

    One way to use the style from your css class using a document.write is to provide an element inside it.

    Ex:document.write("<div class='Quote'>" + Quote[Pick] + "</div>")

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search