Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by jgennick

  1. The Fulton template is better as a separate question, and it would help if you posted a link to the specific page you want to colorize. For regular pages though, the following seems to work:

    #siteWrapper {background-color: green;}

    And then you can target the footers with:

    #preFooter {background-color: green;}
    #footer {background-color: green;]

    Index pages may require a different technique.

    I had time for only a fast look while eating breakfast, and hope the above helps.

  2. Changing the color on just one page is possible using a couple of CSS rules. Go to your one page, click the Settings button, then go to the Advanced tab. Enter the following into the Page Header Code Injection field:

     body {background-color: pink;}
     #canvas {background-color: pink;}

    The first rule changes the entire page body. The content area has its own color setting though, so you must change that one separately. I’ve tried these rules on the demo site’s Read Me page, and they seem to do what you are after.

    Possibly you might need to add !important after the color names, as in “…:pink !important;”. Try the above first. Add the !important if you need it.

    It would be to your advantage to learn enough about CSS to personally understand what the above rules mean and how they work. That’s a shameless plug for my book, but it’s true too.

    Jonathan Gennick, Author: Learn CSS for Squarespace

  3. Just thought I'd add a comment to share my recent experience. I had an iframe tag for embedding a video that is a countdown time to an upcoming event, and thus having the video play automatically is desirable.

    Dropping the tag into a code block was not ideal, as the code block was not responsive to browser window changes. I was placing two videos side-by-side, so having them resize was important. One would resize, and the other would not.

    I ended up discovering that I could use a video block while also dropping in the iframe tag I had been given. I clicked the gear icon to the right of the URL box. That opened an Edit Embedded Data dialog. I took a shot and pasted the iframe tag into that box, and that did the trick. Despite the iframe tag including a width and a height, the video resizes along with the browser screen, and I'm able to have my two videos side-by-side. One is a countdown timer that auto starts. The other is a video that the user must click to play.

  • 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.