Lay Theme Forum

jacobtegel

@ton I was asking myself the same question, adding a few modifiers in the CSS seemed to be the trick for me. id-6 being my home page. In my case i just wanted my home-page as well as project pages (therefore type-project) to be split. Maybe the code i used can be some sort of starting point for you.

#grid .home, .type-project #grid, .id-6 #footer-region , .type-project #footer-region {
        width: 50%;
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #footer-region {
        left: 0;
    }
    #grid .home, .type-project #grid {
        right: 0;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    
.type-project #footer-region,  
.id-6 #footer-region {
        border-right: 1px solid black;
    }

You can find the page id of your website via the web inspector of your browser and then checking the classes inside the <body> tag (there will be a few, just look for the id- one).

All the best,
Jacob

jacobtegel

I would love to have the option to choose for the imagehover addon that the mousover image state will be shown instead of the regular project thumbnail image (kind of how you can choose that the mouseover state will be shown on mobile).

jacobtegel

Oh okay, it doesn’t happen all the time which makes it even weirder.
But changing the browser window size around helps to reproduce. And it’s not only on the first project (the one in the screenshot above) but all the other projects as well. But on the first one i made sure to have the exact same size (pixel by pixel) because i thought that might be the reason – which doesn’t seem to be the case.

jacobtegel

Hey there, i just discovered that in safari the original thumbnail image can sometimes flash through the mousover image, just a 1 pixel row. Also checked Firefox and Chrome and there it does not appear.

Here are two screenshots for further clarification

Screenshot 2023-03-13 at 09.49.57.png
Screenshot 2023-03-13 at 09.50.01.png

Site: new.blila.de

macOS 13.2.1 (22D68)
Safari Version 16.3 (18614.4.6.1.6)
Firefox Version 110.0.1 (64-bit)
Chrome Version 107.0.5304.110 (Official Build) (arm64)

jacobtegel

thank you so much for adding the options to the settings as well as for the custom code; that fixed all the issues!

jacobtegel

can you set your frame-bottom to use px in lay options → gridder defaults
not sure if this is related, please send a screenshot and url of where this happens

I did that, unfortunately this doesn’t solve it (yeah, it’s a good workaround, but it’s not like there’s a universal amount of px cut off, it seems to depend on the row height. For example in this project http://new.blila.de/25-euro-finance-week/ i set the frame-bottom to 25px but it sits right at the bottom of the page. And on http://new.blila.de/25-euro-finance-week/ i also set frame-bottom to 25px and here the images are even cut off (if only by a bit but still).

Screenshot 2023-02-14 at 17.13.07.jpeg Screenshot 2023-02-14 at 17.12.52.jpeg

And you can also see that the background of the left half doesn’t extend do the bottom of the page, probably because the page is shorter than the left half. But i could possibly find a workaround with custom CSS.

I can code a setting for this, i dont know when i will have time for this, i wrote it down

Thank you!

no
i will need to code settings for this

Thank you anyways!

jacobtegel

@ton I was asking myself the same question, adding a few modifiers in the CSS seemed to be the trick for me. id-6 being my home page. In my case i just wanted my home-page as well as project pages (therefore type-project) to be split. Maybe the code i used can be some sort of starting point for you.

#grid .home, .type-project #grid, .id-6 #footer-region , .type-project #footer-region {
        width: 50%;
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #footer-region {
        left: 0;
    }
    #grid .home, .type-project #grid {
        right: 0;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    
.type-project #footer-region,  
.id-6 #footer-region {
        border-right: 1px solid black;
    }

You can find the page id of your website via the web inspector of your browser and then checking the classes inside the <body> tag (there will be a few, just look for the id- one).

All the best,
Jacob

jacobtegel

Hey guys, i am currently working on a new Website using the Laytheme splitscreen method following the Tutorial.
But instead of using a Project Index we want to use a Thumbnail Grid. However, when inside of an active Project, the Thumbnail for this project disappears from the grid. Is there a way to change this behaviour so that all projects will stay inside the grid? Perhaps i am just missing a checkmark in some place?

Site: new.blila.de

I have also found, that the last content-row of the project (right half) will be cut off.

[Another, unrelated, question: is there a way to further style the tags inside the grid (under each project); like for example changing the separator like in the project index?]

Thank you so much in advance!

All the best,
Jacob

jacobtegel

@mariusjopen Thank you!
That would have been my next step.
I was just wondering if there might have been something that i missed.
All the best!
Jacob

jacobtegel

Hey there, so i've noticed that when using fixed height: auto, the images inside a carousel don’t align at the bottom (what i’ve selected in Lay Options/Carousel Addon) but instead at the top. Is this a bug or am i misunderstanding the auto property?
The only workaround i’ve found so far is to calculate the aspect ratio of the carousel since i dont’t want the images to be cropped and aspect ratio of first object gives me quite strange results.
[Tested on Safari & Firefox]

http://s819357108.online.de

Thanks!
Jacob

jacobtegel

i’m working on a site where i want the focused image of a carousel to align with the site title (8.3% offset from the left). I have tried to find out where to put the code but i couldn’t get it to work.
But what i did notice is that somehow the position of the image will be calculated & offset accordingly, the translate3d seems to change based on the selected image.
<div class=".swiper-wrapper" style="transition-duration:0ms; transform: translate3d(-4865.4px, 0px, 0px);">
Would it be possible to have a short piece of code where i could alter the offset in such a manner, that the focused image wouldn’t have it’s left border at 0%, but at 8.3%?

So if somebody should come to this thread in search for an answer: you can offset the »focused« image using this code:

.lay-carousel-slide {
transform:translateX(8.3vw);
}

The 8.3vw (viewport-width) gives me the desired effect. Don’t use a percentage since it will be calculated based on the slide itself. Also don’t offset the swiper wrapper itself, since it will break the carousel and it won’t function anymore.

jacobtegel

@jacobtegel

Best posts made by jacobtegel

Latest posts made by jacobtegel