Different color headers on each page

Ask the community
1

Hi all. I like my header content, but want the frozen header strip to be a different color on each page. I was wondering if there would be a coding thingy that would help… “thingy” meaning I don’t even have a beginner’s level of knowledge to understand other than step by step instructions.

My workaround was to put a container box over the strip, pin it to the page and change the box’s color. I stretched the box off the page of my 27" retina display mac, hoping that the ends of the box would not be visible on any device, but I’m sure this has implications. Also, the menu on the strip won’t work; I’m assuming it’s because the box covers it or the menu is full length and the box is not.

Thanks in advance

2

There is a way of how to achieve your aim. Your idea was even not bad, but of course doing it like you did, would surely not work and as you could see, it also did not work, because you indeed covered all elements by pinning it onto screen.

Your path to …

  1. Your STRIPE is on HEADER-SECTION
  2. The STRIPE itself has NO → STYLE-property!
  3. Your idea with the box was ok → attach the BOX to the STRIPE.
  4. Strech the BOX to the same size like the STRIPE.
  5. Why using the box? → Because it HAS a → STYLE-property.
  6. What is a STYLE-property? That is the property where you can change color.
  7. You will need also to generate a CODE, which will detect which page is currently selected / active!
  8. How it will work ?
    -You will jump from page to page changing every-time your pages.
    -The header is connected to the → MASTER-PAGE, that means, the HEADER is always available/present.
    -By the usage of an simple if-else-query you then will be able to decide, which color will get your HEADER if a certain page has been entered.

Till here everything clear?

Now the coding!!! (we will generate our code on the MASTER-PAGE!)

729×150 5.98 KB

Master-Page-Code: (just an quick example → has to be completed & modified!)

import wixSite from 'wix-site';

$w.onReady(function () {
    // DETECTION of current-page:
    let currentPage = wixSite.currentPage; console.log(currentPage);

    //possible RESULT:
    /*
 *  {
 *    "name": "Home",
 *    "type": "static",
 *    "url": "/home",
 *    "isHomePage": true
 *  }
 */

    //generating our IF-ELSE-QUERY:
    if(currentPage.name = "Home") {$w('#BOX').style.backgroundColor="black"}
    else if(currentPage.name = "XYZ") {$w('#BOX').style.backgroundColor="green"}
    else if(currentPage.name = "ABC") {$w('#BOX').style.backgroundColor="blue"}
    else {$w('#BOX').style.backgroundColor="white"}
});

Also do not forget first to setup the OPACITY of your BOX to 100% in your property-panel.

To change opacity by code → you will have to use RGBA-Color instead of the STRING-COLORS!

Good luck!

1 Like
3

Thank you so much! I will try that out!

4

Well… Seems I had a bit of hubris. The container boxes only LOOKED like they covered the full screen, but that was in editor mode. I think I also pasted your code incorrectly.

So the full details of what I have.: A fully stretched strip with a full image image, Two text boxes, and a fully stretched horizontal menu. I’d like each page to have the same strip and strip elements as above, but the strip on each page would have a different color tint. Let’s call the pages"home", “page1” “page2” “page3” “page4” “page5”

Thanks!

5

It worked!!! Thanks so much!!!

6

Nice to hear that it worked!
Did you have to do any changes?

If so, perhaps you want to share your changes with the community?

7

Sorry it took a bit. I kinda just did stuff without having any idea what I was doing. I deleted all the container boxes. I entered this code that you gave me and then found that I could then toggle “show on all pages” off on every page, for every element on the header strip. I duplicated the strip, pasted it on to every page and then changed the background color and opacity. It worked on all the pages of my site, not just “streets”, “home” and “pages.”

2056×1002 235 KB

And this ended up on only one page

1672×1160 108 KB

8

Ok, i see that these are your first coding steps, no problem.

Some tips!

  1. Do not use more then 1x onReay() in your whole CODE! (delete the empty onReady()-part.

  2. Put IMPORT always on to the TOP of your CODE!

import wixSite from 'wix-site';

$w.onReady(function(){ 
   // comment-1
   // comment-2
   /* comment-3*/
   // comment-4
   // comment-5
});

  1. You can delete COMMENTS (these are not important code-parts and you need them only as INFO inside your CODE)
    Comments are always - - > GREYED-OUT inside your CODE.

  2. Yes your SETUP might work, but if you look onto your CODE, you surely will recognize some RED-marked code-lines, which tells you that there is a conflict.

Your - - > $w(‘#BOX’) is not located on the MASTER-PAGE, this is why you get the error.

I duplicated the strip, pasted it on to every page…

Wouldn’t it make more sense to put the - → BOX ← - onto your MASTER-PAGE? (into HEADER-SECTION) ???

And at least but not last, when you show your CODE - - > please do it like i did and use the CODE-Block…