Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Random color background

Random color background

Scheduled Pinned Locked Moved General Discussion
backgroundcolorcolorrandombackground
20 Posts 9 Posters 4.5k Views
  • 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 Offline
    R Offline
    Ruoner
    wrote on last edited by Ruoner
    #1

    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
    0
    • arminunruhA Online
      arminunruhA Online
      arminunruh
      Global Moderator
      wrote on last edited by arminunruh
      #2

      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
      0
      • R Offline
        R Offline
        Ruoner
        wrote on last edited by
        #3

        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
        0
        • arminunruhA Online
          arminunruhA Online
          arminunruh
          Global Moderator
          wrote on last edited by
          #4
          <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
          0
          • R Offline
            R Offline
            Ruoner
            wrote on last edited by
            #5

            It works @arminunruh thank you so much!

            DMBD 1 Reply Last reply
            0
            • R Ruoner

              It works @arminunruh thank you so much!

              DMBD Offline
              DMBD Offline
              DMB
              wrote on last edited by
              #6

              @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
              0
              • arminunruhA Online
                arminunruhA Online
                arminunruh
                Global Moderator
                wrote on last edited by arminunruh
                #7
                <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", "");

                DMBD 1 Reply Last reply
                1
                • arminunruhA 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", "");

                  DMBD Offline
                  DMBD Offline
                  DMB
                  wrote on last edited by
                  #8

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

                  1 Reply Last reply
                  1
                  • arminunruhA Online
                    arminunruhA Online
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

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

                    DMBD 1 Reply Last reply
                    1
                    • arminunruhA arminunruh

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

                      DMBD Offline
                      DMBD Offline
                      DMB
                      wrote on last edited by
                      #10

                      @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
                      0
                      • arminunruhA Online
                        arminunruhA Online
                        arminunruh
                        Global Moderator
                        wrote on last edited by
                        #11

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

                        DMBD 1 Reply Last reply
                        0
                        • arminunruhA 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 :/

                          DMBD Offline
                          DMBD Offline
                          DMB
                          wrote on last edited by
                          #12

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

                          1 Reply Last reply
                          0
                          • arminunruhA 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 Offline
                            J Offline
                            jmfontbote
                            wrote on last edited by
                            #13

                            @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
                            0
                            • arminunruhA Online
                              arminunruhA Online
                              arminunruh
                              Global Moderator
                              wrote on last edited by
                              #14

                              hey man sorry i have too many other things to do

                              1 Reply Last reply
                              0
                              • F Offline
                                F Offline
                                fernandol97
                                wrote on last edited by
                                #15

                                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
                                0
                                • mariusjopenM Offline
                                  mariusjopenM Offline
                                  mariusjopen
                                  Global Moderator
                                  wrote on last edited by
                                  #16

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

                                  Best!
                                  Marius

                                  www.mariusjopen.world

                                  1 Reply Last reply
                                  0
                                  • A Offline
                                    A Offline
                                    acsgaffney
                                    wrote on last edited by
                                    #17

                                    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
                                    0
                                    • RichardR Offline
                                      RichardR Offline
                                      Richard
                                      Global Moderator
                                      wrote on last edited by
                                      #18

                                      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
                                      0
                                      • G Offline
                                        G Offline
                                        Giammi
                                        wrote on last edited by
                                        #19

                                        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
                                        0
                                        • arminunruhA Online
                                          arminunruhA Online
                                          arminunruh
                                          Global Moderator
                                          wrote on last edited by
                                          #20

                                          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
                                          0
                                          • E etienne referenced this topic on
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          I also code custom websites or custom Lay features.
                                          💿 Email me here: 💿
                                          info@laytheme.com

                                          Before you post:
                                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                                          2. Update Lay Theme and all Lay Theme Addons
                                          3. Disable all Plugins
                                          4. 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:
                                          1. Post a link to where the problem is
                                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                          Online Users
                                          arminunruhA
                                          arminunruh
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                          laytheme.com
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Search