Random color background

Ruoner

Hi @arminunruh , is there a way I can set a random background color to appear on a page each time you load it, but only between a number of specified colors beforehand?

Thanks for your work by the way, the theme is awesome!

arminunruh

Thanks! :)

Add this to "lay options" -> "Custom css & html":

<script>
    var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
    Frontend.GlobalEvents.on("newpageshown", function(){
        var ix = getRandomInt(0, colors.length);
        var color = colors[ix];
        jQuery('body').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;
    }
</script>

Ruoner

Hi @arminunruh, sorry to bother you again, I've been trying to fix this on my own but don't know how to solve it. My idea for the random color background is that it just appears on the homepage and when you go into a single project the background stays white. For now, whenever I use this script, it applies the random color background to all of the pages, is it possible to apply it just for the home and leave the projects with a fixed color background?

arminunruh

<script>
    var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
    Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
        if(obj.slug == "frontpage"){
            var ix = getRandomInt(0, colors.length);
            var color = colors[ix];
            jQuery('body').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;
    }
</script>

This is the line that does it: if(obj.slug == "frontpage"){
Instead of "frontpage" you would need to write the slug of your page that is your frontpage.

Ruoner

It works @arminunruh thank you so much!

DMB

@Ruoner @Armin-Unruh

Hi Guys,

I doctored your code Armin to do a similiar thing but instead of changing the background colour it changes all the text on top a random colour. It works really well! The only thing wrong however, is that when you leave this page the site title and the nav links at the top stay stuck in that colour, rather than reverting back to black which is what it is in the rest of the site. Any idea why? I specified "about" which is the slug for the page...

Here's my edited code in case you can take a quick look:

// 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;
}

</script>

arminunruh

<script>
var colors = [ "#006180", '#CCFF00', '#00FFFF', '#1100ff']
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
	if(obj.slug == "about"){
		var ix = getRandomInt(0, colors.length);
		var color = colors[ix];
		jQuery('._About_Desc').css('color', color);
		jQuery('._PROJ_HEAD').css('color', color);
		jQuery('.sitetitle.txt ').css('color', color);
		jQuery('nav.primary a').css('color', color);
		jQuery('nav.primary .current-menu-item a ').css('color', color);
		jQuery('nav.primary a:hover').css('color', color);
		jQuery('p').css('color', color);
		jQuery('hr ').css('color', color);
		jQuery('.lay-textformat-parent a').css('color', color);
		jQuery('.lay-textformat-parent a:hover').css('color', color);
	}else{
		jQuery('._About_Desc').css('color', '');
		jQuery('._PROJ_HEAD').css('color', '');
		jQuery('.sitetitle.txt ').css('color', '');
		jQuery('nav.primary a').css('color', '');
		jQuery('nav.primary .current-menu-item a ').css('color', '');
		jQuery('nav.primary a:hover').css('color', '');
		jQuery('p').css('color', '');
		jQuery('hr ').css('color', '');
		jQuery('.lay-textformat-parent a').css('color', '');
		jQuery('.lay-textformat-parent a:hover').css('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;
}
</script>

Please try this. You see I'm using "else" there. so if the page is not of slug "about", this takes away the custom random color by using .css("color", "");

DMB

@arminunruh Works perfectly! Thanks so much man! If i could buy you a beer i would! :beer:

arminunruh

Haha you already bought me multiple beers because you bought an addon or bought lay theme :D

DMB

@arminunruh Hi Armin, Sorry to bother you again with this.

Just trying to get the burger involved with this random colour change as it looks a bit odd with everything else changing apart from it...

I targeted the .burger selector and tried adding it in following the same syntax as your code (the two posts up from this), and it changes the middle bar of the burger but not the top or bottom bars, or the X when clicked... Any idea what im doing wrong?

    jQuery('.lay-textformat-parent a').css('color', color);
    jQuery('.lay-textformat-parent a:hover').css('color', color);
    jQuery('.mobile-title.text').css('color', color);
    jQuery('.burger span:before').css('background-color', color);
    jQuery('.burger span').css('background-color', color);
    jQuery('.burger span:after').css('background-color', color);

Thanks!

D

arminunruh

I think that jQuery('.burger span:before') doesn't work. I think you cannot select a ":before" and style it like that. Because :before is not an html element but just a css selector. So I'm sorry but I think you cannot give the burger icon a random color :/

DMB

@arminunruh Ok thanks for that Armin, good to know so i dont waste hours trying to make it work! :grin:

jmfontbote

@arminunruh Hi, I want to do a background color random, but I have an issue to do it. I tried to do what you proposed, but it did not help. Can you please check the web?
w. cookieradio.online
Thanks!

arminunruh

hey man sorry i have too many other things to do

fernandol97

Also trying to achieve this. Quick question about when adding the code in lay options>custom css & html. which box do you enter the code into? do you add it into the custom css box?

mariusjopen

Dear @fernandol97
yes. CSS into the CSS box.
JS into the head or the footer.

Best!
Marius

acsgaffney

Hello admins,

I have done some trawling around and tried a few different fixes but cannot seem to get the above (original) code to work - to have a random background selected from a set of colors. I've added the code line-for-line into the <head> section on the Custom CSS page.

Is there an issue with JS function getRandomInt or a change to the 'background-color' order or syntax? Any help would be apprecieated. Thanks!

Best

www.angusgaffney.com/category/projects

Richard

Dear @acsgaffney

The code above referring to this one?:

<script>
var colors = [ "#006180", '#CCFF00', '#00FFFF', '#1100ff']
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
	if(obj.slug == "about"){
		var ix = getRandomInt(0, colors.length);
		var color = colors[ix];
		jQuery('._About_Desc').css('color', color);
		jQuery('._PROJ_HEAD').css('color', color);
		jQuery('.sitetitle.txt ').css('color', color);
		jQuery('nav.primary a').css('color', color);
		jQuery('nav.primary .current-menu-item a ').css('color', color);
		jQuery('nav.primary a:hover').css('color', color);
		jQuery('p').css('color', color);
		jQuery('hr ').css('color', color);
		jQuery('.lay-textformat-parent a').css('color', color);
		jQuery('.lay-textformat-parent a:hover').css('color', color);
	}else{
		jQuery('._About_Desc').css('color', '');
		jQuery('._PROJ_HEAD').css('color', '');
		jQuery('.sitetitle.txt ').css('color', '');
		jQuery('nav.primary a').css('color', '');
		jQuery('nav.primary .current-menu-item a ').css('color', '');
		jQuery('nav.primary a:hover').css('color', '');
		jQuery('p').css('color', '');
		jQuery('hr ').css('color', '');
		jQuery('.lay-textformat-parent a').css('color', '');
		jQuery('.lay-textformat-parent a:hover').css('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;
}
</script>

Pretty sure you must change the 'Frontend.globalevents.on' to the modern 'window.laytheme.on'

https://laytheme.com/documentation.html#custom-javascript

I believe things have changed since 2016! :)

Hope this helps & best wishes for 2021
Richard