MARQUEE - Different color combinations for index pages? - Squarespace Answers

MARQUEE - Different color combinations for index pages?

So we've all seen non-sqsp sites that mix up background and text color combinations for different sections of the page.

Is this possible with Marquee and a bit of CSS? text-color colors background marquee Asked Aug 08 '13 at 10:39 by simondee 36●1●2●3 2 3 6 Answers:OLDESTNEWESTMOST VOTED Hey Simon, just got this working after a bit of playing around so I thought I'd post it up.

I don't think my css is going to win any awards, but this block of code will do the trick (obviously replace the data-url-id and page id with yours):

.parallax-item[data-url-id='directors'] {background-color:transparent!important;} .parallax-item[data-url-id='directors'] .content-inner {background-color:#000000!important;} .parallax-item[data-url-id='directors'] .content {background-color:#000000!important;} #page-5217ea06e4b02837fdbcf5a9 {background-color:#000000!important;} #page-5217ea06e4b02837fdbcf5a9 p {color:#ffffff!important;} Let me know if any of it needs more explanation. Dougs Answered Aug 25 '13 at 22:51 by dougs 31●2 link Hi there,

Thanks for posting this! I changed the background-color to the page id, but it didn't change the entire div. (see red background color in screenshot)

Is it possible to change the YUI id (see green background color in screenshot)? It seems to be overridden even with "!important".

Thanks! Puno (Dec 09 '13 at 02:40)punodostres 2 Hi Pablo,

No worries. You'll need a developer browser plugin or extension like Firebug (

This let's you look through the code line-by-line that Squarespace is generating to find the classes and div. Then you can change them in your custom css.

Hope that helps.

Answered Nov 05 '13 at 18:04 by dougs 31●2 link 1 Thanks for the code, it worked. How do I change the text color as well?

-chris Answered Oct 31 '13 at 02:44 by christopheronstott 1 link 0 Hi Chris,

In the code above, the line...

page-5217ea06e4b02837fdbcf5a9 p {color:#ffffff!important;}

Should do it (obviously with the page id changed to whatever your page id is).

Shoot me a link to your page if you want and I'll take a quick look at why it isn't working.

Dougs Answered Nov 05 '13 at 06:09 by dougs 31●2 link 0 Hi Dougs,

This is the same I was looking for, thanks for posting it. I only have 1 question, where do I get the page id from? sorry....

Pablo Answered Nov 05 '13 at 12:28 by cliqueshops 1●1 link 0 Hi Doug,

Hoping you can help. I've tried adding your CSS code and I keep getting a syntax error on line relating to the data url id. I've added it with and without YUI at the front and tried with and without data-url-id written at the front, no joy. Any suggestions/idea as to what I've entered incorrectly?

Thanks Answered Nov 17 '13 at 09:08 by Rita 1●1 link You just need to add the url name, such as 'home' or 'about'. For example: for page you want to make the change to, if the url then the part you replace 'directors' with in the original code is 'iloveicecream'. So it would look like:

.parallax-item[data-url-id='iloveiceream'] {background-color:transparent!important;} .parallax-item[data-url-id='iloveiceream'] .content-inner {background-color:#000000!important;} .parallax-item[data-url-id='iloveiceream'] .content {background-color:#000000!important;} (13 hours ago)kyniver