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 background and text color

Random background and text color

Scheduled Pinned Locked Moved General Discussion
8 Posts 2 Posters 1.7k 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.
  • A Offline
    A Offline
    antonioprado
    wrote on last edited by
    #1

    Re: Random color background

    Hello @arminunruh and @mariusjopen ! I'm trying to achieve this: random background and text color; example: when i load the page, i need to have a random background color, and be able to choose the text color as well, based on the background color (when the random background is black, the text is white, and the opposite). Is there any way to do this? I've tried to follow the code you gave but nothing...

    Thank you very much guys!! Have a nice week! :D

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Hi antonioprado!

      Did you already manage the normal random background color?

      Can you post a link to the website?

      If this works – then we can figure out how to make the opposite color for specific elements.

      :-)

      Keep me updated!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • A Offline
        A Offline
        antonioprado
        wrote on last edited by
        #3

        Hi @mariusjopen !! Thank you for your answer! I'm working on a local host, but i've created a page to show you the code i'm using! I already manage the normal random background color as you can see on this page:

        http://antonio-prado.com/backgroundtest

        In this page I have two different backgrounds, white and black, and what I need to do is change the text color based on the active background.

        This is the code I'm using for the random background:

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

        Thank you very much for your help!! :D Have a good day!

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Hey Antonio,

          I will try to give you a direction:

          This is your code:

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

          I would create a second array of colours which have exactly the inverted colours.

          To demonstrate I reduced your array of colours to two colours. You can keep your array with the many values.

          var colors = ['black', 'white'];
          var colors_invert = ['white', 'black']
          

          And then I would make a new variable which gets exactly the same random number like your color variable.

          var color = colors[ix];
          var color_invert = colors_invert[ix];
          

          Then I would assign that new variable to another object

          jQuery('body').css('background-color', color);
          jQuery('object').css('color', color_invert);
          

          In total it will look like this:

          <script>
          var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
          var colors_invert = [HERE YOU HAVE THE INVERT VALUES IN THE SAME ORDER LIKE ABOVE]
          Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
          if(obj.slug == "frontpage"){
          var ix = getRandomInt(0, colors.length);
          var color = colors[ix];
          var color_invert = color_invert[ix];
          jQuery('body').css('background-color', color);
          jQuery('NEW_OBJECT').css('color', colors_invert);
          }
          });
          
          // 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>
          

          I hope that helped :-)

          All the best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • A Offline
            A Offline
            antonioprado
            wrote on last edited by antonioprado
            #5

            Hi @mariusjopen !! Thank you very much for your time and for the answer! I just put the code you gave me, but nothing happens; only the background changes it's color. I have a question that I think is important and it's the reason why it's not working:

            jQuery('NEW_OBJECT').css('color', colors_invert);

            What do you mean with NEW OBJECT? Is something that I have to create? Or just put this word...?

            Thank you very much!! All the best!! :D

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Hey antonioprado,

              the code does not do anything because you need to adjust it to your needs first :-)

              I really recommend to get first a bit into Javascript and jQuery.

              On Codeacademy you can get a quick crashcourse which will teach you the basic.

              What I showed you here is pretty basic.

              The NEW_OBJECT is the object you want to apply the inverted colour to.

              Once you get the basics, you will understand my explanation :-)

              Good luck! I went through the same shit once. But it is surprisingly easy, once you got the basics.

              Marius

              www.mariusjopen.world

              A 1 Reply Last reply
              0
              • mariusjopenM mariusjopen

                Hey antonioprado,

                the code does not do anything because you need to adjust it to your needs first :-)

                I really recommend to get first a bit into Javascript and jQuery.

                On Codeacademy you can get a quick crashcourse which will teach you the basic.

                What I showed you here is pretty basic.

                The NEW_OBJECT is the object you want to apply the inverted colour to.

                Once you get the basics, you will understand my explanation :-)

                Good luck! I went through the same shit once. But it is surprisingly easy, once you got the basics.

                Marius

                A Offline
                A Offline
                antonioprado
                wrote on last edited by
                #7

                @mariusjopen Hi !! Thank you very much for your time and the advice, I really appreciate it!! I already start the course on Code Academy! Hope to be able to understand it... :)
                Thank you and have a nice week!!

                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  Hi antonioprado!

                  Great! Success!

                  Once you got it – you can do much more than random backgrounds ;-)

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply
                  0
                  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
                  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