Why isn't my code working and are there any other options available to me?

Ask the community
,
1

In designing my website I’ve decided to color code each page a different color. For the header this isn’t too much of an issue, just place a shape on it and turn off “Show on all pages”

HOWEVER for some F#$%@&! reason you cant do this with the footer so I resorted to using a code

$w(“#insertvectorhere”).hide();

The problem is that if it works on one page it doesn’t work on any of the others. For example:
I have a blue footer on page A and a purple footer on page B
So I place both a blue and purple vector in the footer
on page A I use the code $w(“#purplevector”).hide();
and on page B I use the code $w(“#bluevector”).hide();
(obviously I use the actual vector # in the code this is just for clarity)

However when viewing the site only one page will function at a time
if page A has the appropriate footer then page B will have no vector in the footer at all and vice versa

Can anyone please help me understand what is going on and how to fix it? Also if there is a better way to handle this I am absolutely all ears. I would definitely prefer to not have to use vectors at all for this either in the header or footer if that is at all an option!

2

OKAY! Figured it out

So first make sure you have a header/footer background already in place set to the opacity that you want. I used a white color, not sure if that matters

Then place the following in the LAYOUT PAGE CODE
Then set your preferred color. The last “0.5” refers to the opacity

$w.onReady( function () {
$w(“#header1”).style.backgroundColor = “rgba(200,0,0,0.5)”;
$w(“#footer1”).style.backgroundColor = “rgba(200,0,0,0.5)”;
});

Then on every other page you would like to be different just add the same code and change the color