Hi @extra-vitamins
I did not do the whole thing but actually you just need to copy the code and use it again_
<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
Frontend.GlobalEvents.on("work", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
jQuery('.colors-1').css('background-color', color);
}
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
var colors2 = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
Frontend.GlobalEvents.on("work", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt2(0, colors2.length);
var color = colors2[ix];
jQuery('.colors-2').css('background-color', color);
}
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt2(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
Then you make two divs:
<div class="colors-1">COLORS-1</div>
<div class="colors-2">COLORS-2</div>
This is a quick and dirty method and you might do some adjustments to get it work. But this is how you colud do it.
Otherwise use images.
Best!!
Marius
