Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Random color background

    General Discussion
    backgroundcolor color random background
    9
    20
    3607
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      Ruoner last edited by 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!

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by 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>
        
        J 1 Reply Last reply Reply Quote 0
        • R
          Ruoner last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • arminunruh
            arminunruh Global Moderator last edited by

            <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.

            1 Reply Last reply Reply Quote 0
            • R
              Ruoner last edited by

              It works @arminunruh thank you so much!

              DMB 1 Reply Last reply Reply Quote 0
              • DMB
                DMB @Ruoner last edited by

                @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:

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

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

                1 Reply Last reply Reply Quote 0
                • arminunruh
                  arminunruh Global Moderator last edited by 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 1 Reply Last reply Reply Quote 1
                  • DMB
                    DMB @arminunruh last edited by

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

                    1 Reply Last reply Reply Quote 1
                    • arminunruh
                      arminunruh Global Moderator last edited by

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

                      DMB 1 Reply Last reply Reply Quote 1
                      • DMB
                        DMB @arminunruh last edited by

                        @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

                        1 Reply Last reply Reply Quote 0
                        • arminunruh
                          arminunruh Global Moderator last edited by

                          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 1 Reply Last reply Reply Quote 0
                          • DMB
                            DMB @arminunruh last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • J
                              jmfontbote @arminunruh last edited by

                              @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!

                              1 Reply Last reply Reply Quote 0
                              • arminunruh
                                arminunruh Global Moderator last edited by

                                hey man sorry i have too many other things to do

                                1 Reply Last reply Reply Quote 0
                                • F
                                  fernandol97 last edited by

                                  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?

                                  1 Reply Last reply Reply Quote 0
                                  • mariusjopen
                                    mariusjopen Global Moderator last edited by

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

                                    Best!
                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 0
                                    • A
                                      acsgaffney last edited by

                                      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

                                      1 Reply Last reply Reply Quote 0
                                      • Richard
                                        Richard Global Moderator last edited by

                                        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

                                        1 Reply Last reply Reply Quote 0
                                        • G
                                          Giammi last edited by

                                          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.

                                          1 Reply Last reply Reply Quote 0
                                          • arminunruh
                                            arminunruh Global Moderator last edited by

                                            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

                                            1 Reply Last reply Reply Quote 0
                                            • Referenced by  E etienne 
                                            • First post
                                              Last post
                                            Post a link to where the problem is if possible, please <3
                                            I don't answer or check forum DMs, please just post on the forum.
                                            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                                            Before you post:

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
                                            Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            Recent Topics

                                            • Search as icon instead of text?

                                            • FILTER Categories showing all projects

                                            • H

                                              Vimeo embed with autoplay and loop is really slow...help!

                                            • A

                                              website not loading on iphone safari

                                            laytheme.com