Random color background

[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

[Giammi]

Hi there, this code work great :)

I'm pretty new to the Wordpress and the Lay Theme and i was wondering if there is anyway i can add this code only for a specific page instead of make it global. Is it possible?

Thank you in advance for the answer.

Have a nice day.

[arminunruh]

u can find the correct working code here:

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

<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
window.laytheme.on("newpageshown", function(){
	var ix = getRandomInt(0, colors.length);
	var color = colors[ix];
	jQuery('#grid, #custom-phone-grid, .cover-region-desktop, .cover-region-phone, #footer, #footer-custom-phone-grid').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)
function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;
}
</script>

@Giammi
read the text at the link above, u can find out how to do that there