Random color background

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

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

Lay Theme Forum

Random color background

Before you post:

When you post:

Online Users