Without changing the JS, you can simply generate the rules with [data-color] in the loop to define the image path according to the attribute value. Then, as with the color select button, a default declaration will have to be specified directly in the CSS.
overall_header (in the loop, as suggested by Gumboots):You need to use
CSS:Otherwise, the JS would have to be modified to adapt it to the new context.
A more flexible alternative would be to use a neutral SVG as the image in the HTML, and apply the colours (via mask, fill or stroke) with CSS. This would make it possible to have just one base image, avoiding the need to create new ones for each colour initialised in the array.
overall_header (in the loop, as suggested by Gumboots):
Code:
[data-color="{{ color }}"] .variant_switch { background-image: url("{{ T_THEME_PATH }}/images/footer/{{ color }}.png"); }T_THEME_PATH to build the path to the current page.CSS:
Code:
.variant_switch {background-image: url("./images/footer/default.png");}A more flexible alternative would be to use a neutral SVG as the image in the HTML, and apply the colours (via mask, fill or stroke) with CSS. This would make it possible to have just one base image, avoiding the need to create new ones for each colour initialised in the array.
Statistics: Posted by cabot — Wed Apr 23, 2025 9:24 am