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. Site title color change based on background

Site title color change based on background

Scheduled Pinned Locked Moved General Discussion
6 Posts 3 Posters 181 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.
  • J Offline
    J Offline
    JohannesHaech
    wrote on Apr 5, 2024, 8:34 AM last edited by
    #1

    "I would like to implement a feature on my website where the site title inverts according to the background, similar to what's seen here: https://lsbstudios.co.uk. I have tried adjusting the title, which is embedded as an SVG, using CSS and JavaScript, but I couldn't achieve a working result. Has anyone ever done something similar before?"

    1 Reply Last reply
    0
    • D Offline
      D Offline
      domphilcox
      wrote on Apr 8, 2024, 10:40 AM last edited by
      #2

      Hey Johannes, to achieve the effect, you just need to add the following css:

      .sitetitle {
      mix-blend-mode: difference !important;
      }

      J 1 Reply Last reply Apr 9, 2024, 7:35 AM
      0
      • A Offline
        A Offline
        arminunruh
        Global Moderator
        wrote on Apr 8, 2024, 2:29 PM last edited by
        #3

        yes that is a great way to do it too!
        we also did it this way here by just switching colors when on a black row:

        http://laythemeforum.com:4567/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background/14

        1 Reply Last reply
        0
        • D domphilcox
          Apr 8, 2024, 10:40 AM

          Hey Johannes, to achieve the effect, you just need to add the following css:

          .sitetitle {
          mix-blend-mode: difference !important;
          }

          J Offline
          J Offline
          JohannesHaech
          wrote on Apr 9, 2024, 7:35 AM last edited by
          #4

          @domphilcox Thank you for the response. I'm not sure if I'm misunderstanding something, but simply inserting the code into the custom CSS does nothing except invert my current logo. However, it doesn't affect the background. Or am I misunderstanding something?

          1 Reply Last reply
          0
          • A Offline
            A Offline
            arminunruh
            Global Moderator
            wrote on May 1, 2024, 9:42 PM last edited by
            #5

            do u have a link @JohannesHaech
            ?

            1 Reply Last reply
            0
            • A Offline
              A Offline
              arminunruh
              Global Moderator
              wrote on May 1, 2024, 9:43 PM last edited by
              #6

              of ur website i mean

              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