RE: Portal - CSS changing the header per page
Hey Unicorn Tech!
To my knowledge, there is no way to do the conditional CSS just using CSS alone. If you wanted to set a specific image based on the webpage accessed you would have to use Javascript/JQuery.
If you were to edit the Header web template, you should be able to add a function near the bottom of the file that will read the current path (using the location object), and based on the page URL you will have to override the styling for the .section-landing to set the background appropriately.
There are a few ways you could accomplish this but I think utilizing the Header web template is the easiest and adding the JS function to the file should be straight-forward.
If you were partial to using Liquid code you could do a hybrid approach and use Liquid to retrieve the page URL (instead of using JS to strip the URL), save that page URL to a hidden HTML element on the header, and then use JS to pull that value and assign the image.
For example:
{% assign page_url = page.url %}
function setHeaderImage() {
let url = $("#pageUrl").text();
let imageUrl = "";
switch (url) {
case "/page-1":
imageUrl = "page-1-image.jpg";
break;
case "/page-2":
imageUrl = "page-2-image.jpg";
break;
}
$(".section-landing").css("background", "url(" imageUrl ") no-repeat center !important");
};
The alternative (which may be cleaner) would be to utilize classes for your styling and handle it all in your stylesheet. You would still need to write JS code to add the class to the element, however, you could add "page-1-class", "page-2-class", etc. to the ".section-landing" element and then handle the image setting in those classes in your stylesheet.
Either way will work, it's really up to you!
Thanks!
Matt Bayes
