Lay Theme Forum

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

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

Do you already have a website where your logo and menu are implemented? Alternatively, do you have a website that showcases the feature you aim to achieve as an example? Sharing the link with us would enable us to assist you more effectively.

The deactivation of lazy loading has solved the problem. Thank you very much.

Okay, with some GPT assistance and my limited knowledge, I've found a workaround. It's working quite okay for now. The problem is that the carousel plugin doesn't load directly but only after clicking on it. Perhaps someone can come up with a solution within my makeshift workaround to fix that.

I have solved it using a custom HTML element and some CSS and JavaScript. Here is the webpage where I am testing it and the individual code blocks.

testpage

html:

<div class="project-thumbnail" onclick="toggleOverlay('overlayID', true)">
  <img src="http://johannes-haeffner.de/wp-content/uploads/2024/03/ARU-bilder-2594-1.jpg" alt="Projekt Thumbnail">
</div>

<div id="overlayID" class="overlay" style="display:none;">
  <iframe src="http://johannes-haeffner.de/popup-test-loading-page/" frameborder="0"></iframe>
</div>

css

.overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  background-color: white;
  z-index: 1000;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.overlay iframe {
  width: 100%;
  height: 100%;
}

body.blur-background {
  overflow: hidden;
}


.overlay button {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 1001;
}


body.id-930 a.sitetitle {
    display: none;
}


body.id-930 a.overlay-burger {
    display: none;
}

java

<script>
  document.addEventListener('DOMContentLoaded', function () {
   
    function toggleOverlay(show) {
      var overlay = document.getElementById('overlayID');
      if (show) {
        overlay.style.display = 'block';
        document.body.classList.add('blur-background');
      } else {
        overlay.style.display = 'none';
        document.body.classList.remove('blur-background');
      }
    }

   
    document.querySelector('.project-thumbnail').addEventListener('click', function(e) {
      e.stopPropagation(); // Verhindert das Auslösen des document click Event Listeners
      toggleOverlay(true);
    });

   
    document.addEventListener('click', function(e) {
      var overlay = document.getElementById('overlayID');
      if (overlay.style.display === 'block' && !overlay.contains(e.target)) {
        toggleOverlay(false);
      }
    });

 
    document.getElementById('overlayID').addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });
</script>

Hi everyone,

I'm currently working on designing a one-pager using Laytheme, and I'm looking to implement a specific functionality. I want users to be able to click on an image and have a popup window open (similar to a lightbox). Ideally, I'd like to create a page or project that appears as a popup overlaying the main page when clicked.

I've attempted to illustrate what I'm aiming for in a small sketch.
Has anyone here attempted something similar or knows of a straightforward solution or additional plugin to achieve this within Laytheme? Any guidance or recommendations would be greatly appreciated!

Thanks in advance for your help!

Hey, thanks for the solutions. I think I'll use ChatGPT and try my luck with coding. I'll share the solutions I find and the finished webpage here. I'm quite new to the topic, so thank you guys for your support.

Thank you very much, it worked quite well when closing it by clicking next to the page.

Do you see any other solution to open an on-page pop-up without the overlay feature and without using a picture and the hover effect? For instance, is it possible to link a fixed element to a click event on a page?

Hey, I'm currently working on a one-page website and I was wondering if someone has created something similar to my idea and could help me with my problem. Since it's a one-pager, I want to implement a feature where the page "soft-locks" onto specific points on the website. It's like sliding through the page as if it were a slideshow, but you activate the next slide by scrolling. If anyone understands what I mean and has a simple solution, it would be greatly appreciated.

Hey everyone,

I want to build a one-page website and incorporate an overlay feature to showcase some projects. Currently, I'm achieving this by linking the overlay feature to a text element, so when the link is clicked, the overlay appears. However, I'd like to add two additional features to this and I'm wondering if it's possible without extensive coding:

1. Allow the overlay to be closed by clicking anywhere outside of it. I find it inconvenient to constantly reach for the X button.
2. Implement animations, but specify the starting point from which they slide in. For instance, have them slide in from the position of the overlay link rather than from the top or side.

Looking forward to any insights on how to accomplish these enhancements efficiently. Thanks!