Lay Theme Forum

Thank you for your answer @Richard . I need the video to be fixed and to cover the whole body (100vh)

Now I found out that the behavior is down to position fixed, causing this problem in the mobile view. Using your code (or my code) with position fixed is causing this error. Without fixed positioning, everything works as expected.

Is there something that I need to know about the theme in order to work with fixed positioning? Cause I remember some issues in the past that I had with fixed positioning.

Would love to hear from you
Best, Markus

@Richard - I've found out that the problem is down to custom mobile layouts.

Surprisingly, if there is NO custom mobile layout, the video does not work.
If there is a custom mobile layout the video shows as expected.

Any Idea how to solve this?

Hey @Richard, no unfortunately not. I've set up a test page
https://www.markuswindt.de/gfgg/

right at the mobile breakpoint, the video collapses. It's not a custom mobile CSS issue - deleted all and tested. same behavior.

Re: Use a video as page background

I'm trying to create a fixed background video. On desktop everything works fine, just on the mobile breakpoint the video gets cut and isn't fullscreen anymore.

I could change .coulmn-wrap to position: fixed as well and everything would work,
however, in the final application this is not an option.

My html

<video playsinline="" muted="" loop="" class="autoplay loaded bg-videoo" autoplay=""><source src="https://www.domain.de/wp-content/uploads/2021/06/file-name.webm" type="video/webm"></video>

and CSS

 .bg-videoo {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }

In general videos like this work on mobile. Like with this Pen https://codepen.io/chriscoyier/pen/jmXapj?editors=1100
So it has to have something to do with laytheme.

Could you help me?

Hello :)

It would be nice to be able to assign custom classes to the body of a page.

Handy for custom coding that doesn't need to be done globally, and neither for a single page only.

For example, you want custom coding for all your projects (but not for the other pages) Now you could have a class for all project pages.

best,
Markus

Alright, Thank you @arminunruh !

Sure, no problem @Richard , I can imagine!

Hey @Richard,
have you heard anything from @arminunruh regarding this? :)

Best,
Markus

Hello :)
I'd like to have a custom 404 page. Unfortunately this dosen't seam to be possible since LayTheme (or wp) is redirecting wrong links to the index page.

This is my .htaccess file - I think the problem is the part after #END WordPress with the 301

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

I know I need to add something like this:

ErrorDocument 404 /not-found-page.php

And probably need to delete the rewrite Engine stuff, but I am scared.

Could someone help me?

Kind regards,
Markus

Hello Armin and Marius,

I ran into the same problem with the newest Lay Theme Version.

With another website running Lay Theme Version: 2.9.5 everything worked fine with custom phone layouts. After updating the Theme the same issue occurred here.

Any further Tips?

Maybe it's because the Shopify code is an #ID that is called 2 times (with custom phone layout) and that's causing the problems?! Maybe the new lay theme version is more strict dealing with that issue?

Would be very thankful for any advice on how to solve this!

Yea, I tried "newpage" and "newpageshown" - both don't work

the thing is I am not sure if:
window.laytheme.on("newpage", function() {

really replaces:
$(window).load(function() {

but according to the documentation it should right?
Maybe you have an idea?

Best, Markus

Hey,
I tried to implement a preloader to the site similar to: https://weberruss.com/expertise/
(I couldn't really find out how they did it, but it's a lay theme site)

I tried this:
Custom HTML at top:
<div class="preloader"></div>

Custom <head> content:
<script>
window.laytheme.on("newpage", function() {
jQuery('.preloader').fadeOut('slow');
});
</script>

Custom Css:
.preloader {
width:100vw;
height:1px;
position:absolute;
background: black;
margin:0;
animation: fillup .4s ease infinite;
top:0;
left:0;
}

@-webkit-keyframes fillup
{
from { width:0px; }
to { width:100%; }
}

–
The code works, but only on a page reload. So if click on another menu item nothing shows up. (The javascript fadeout works at least)

I used to do preloaders with this js, but have rewritten it according to the laytheme documentation:

$(window).load(function() {
$('.preloader').fadeOut('slow');
});

to:
<script>
window.laytheme.on("newpage", function() {
jQuery('.preloader').fadeOut('slow');
});
</script>

–
I probably made a mistake there - could you help me?

Many thanks in advance,
Markus

AH cool, thaks for the qucik answer Marius - will try!

Hey,
I'd like to implement the new search feature by clicking a link in a text box on a page. I'd tried to do that via <a href="#search">search</a> wich does not work.

Is it possible to integrate the search feature in any way besides as a custom menu link?

best,
markus