Random color background
-
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 :/ -
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 :/@arminunruh Ok thanks for that Armin, good to know so i dont waste hours trying to make it work! :grin:
-
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>@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! -
hey man sorry i have too many other things to do
-
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?
-
Dear @fernandol97
yes. CSS into the CSS box.
JS into the head or the footer.Best!
Marius -
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
-
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 -
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.
-
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 -
E etienne referenced this topic on
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it