Lay Theme Forum

Thanks Armin. I already asked ChatGPT and it gave me this code, which works - the attributes are inserted within the <SVG id> section. Changed it using textedit.

Hope that helps anyone exporting from Illustrator, as most of us probably are?

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
<defs>
<style>
.cls-1{fill:#606060;opacity:.5;}
.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.67px;}
</style>
</defs>
<rect class="cls-1" width="52" height="52" rx="4" ry="4"/>
<polyline class="cls-2" points="22.87 17.06 31.81 26 22.87 34.94"/>
</svg>

Fixed!

Thanks Armin :)

Update on this - it seems like any element that previously had the new "Opacity" effect applied to it is now suffering from this flashing upon loading, even when the effect has been removed. The only way I can fix it is by deleting the element and replacing it with a new version.

Would be great to fix this bug, as the ability to set the opacity is super helpful, I've been doing it by setting classes but there's a delay between the page load and the class being applied - doesn't look too bad but isn't ideal.

Thanks!

Hey @arminunruh thanks for your help so far,

All was working nearly perfectly with my overlays but after the recent update, my "Contact" page is now showing a "flash" of the content when it loads, rather than smoothly appearing.
https://primaryworks.com.au/

(Click the read more or Contact button)

It's weird because my other overlays don't do this, even though as far as I can see there's no difference in the way they are set up or any strange code differences.

I did have some opacity effects on the contact page which were causing a similar thing to happen, I've removed them and it was all good but now the problem has returned.

Any insight you might have would be super, thank you!

@arminunruh thanks, I tried inserting that but it didn't work - whereabouts would you place it in the string of code? Not sure if there's something I'm missing...

@arminunruh thank you!

Yes, the first thing you said is correct - disabled links are displaying the hover image of the nearest active link, instead of their own hover image, or no image at all.

For now I used CSS to disable the hover completely for the disabled links.
But what I'd love is to see the correct hover image (as a sneak preview) for them, without them being clickable (or showing the google link preview).

I also couldn't work out how to target the "on scroll" image for mobile, as this had the same problem, so switched those off altogether. Any ideas there?

Hope that makes sense!

@arminunruh thanks, would be great to get sorted :)
I've removed the mobile interaction for now.
Desktop has a few kinks but works fine 90% of the time for me.

I'm having issues with this too. Instagram seems to ignore the overlay and just opens projects as a page without the close button or other overlay styling (mine have a transparent blurred BG). However I can open each project individually without issues.

Hi Armin,

Thanks for the "disable link" feature for projectindex and thumb grids.
That's really handy for creating "coming soon" projects.

Encountered an issue though, which is when this is used for the index, the hoverimage from the adjacent active link is used which makes it look wrong, see here https://primaryworks.com.au/index/

Ideally here, there'd be an option to "hide" or "show" the thumbnail in addition to disabling the link.
That would be really amazing.
In my case I want all the thumbnails to show but only certain projects to link through.

Hope that makes sense,

Hello @arminunruh , I'm struggling with this also.

I have uploaded custom "prev / next" buttons for my carousel (via the lay theme options). The SVG code looks like this:

<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#606060;opacity:.5;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.67px;}</style></defs><rect class="cls-1" width="52" height="52" rx="4" ry="4"/><polyline class="cls-2" points="22.87 17.06 31.81 26 22.87 34.94"/></svg>

The width and height (52px) are included in the code (from illustrator) but the buttons don't show up.

If you can let me know how to fix that would be amazing!

Thank you,

Hi Armin,

I'm running into an issue when using anchor links within an overlay project.
I have a "read more" link that jumps you down to the project text.
Works fine on desktop - here's the test page: https://primaryworks.com.au/south-east-centre-for-contemporary-art/

However, on mobile any scrolling of the main website results in the anchor jumping too far down the page, past the point specified via the lay options. It seems that the overlay is responding to the scrolling that's happening behind it somehow.

Can't quite work out how to fix, any help greatly appreciated!

Best,

Thanks @arminunruh, that worked a treat :)

Thanks @arminunruh , the CSS targeting the overlay did the trick, although it's not super smooth it's a big improvement!

I'm sure there's a way to fine tune it with JS but that's probably beyond my skill level.

Many thanks!

Thanks @arminunruh - it works!

One more thing with this, I've realised that I need to hide the "hand" link cursor so it doesn't look clickable - either keep the arrow or change to another symbol.

How would you recommend doing this?

OK - I figured out point no. 2, had the wrong settings.

Would still love some help with point 1, just getting a smoother scroll in the overlay mode :)

Thanks,

Hello @arminunruh,

I have my project pages set up as overlays, example here.
Each page consists of 2 browser height rows.

What I'm aiming for is the anchor link when clicking "read more" button smoothly scrolls you down to the project text row, below the carousel of images.

I have achieved this using the css:

html {
scroll-behavior: smooth!important;
}

There are two issues with this:

1. the smooth scroll works when the page is re-loaded (i.e. not in overlay mode) but the css seems ineffective when the overlay is active, it just jumps down super fast.

2. When overlay is active, the anchor link jumps to correct point (top of the row) but when the page is reloaded the anchor jumps further down and doesn't seem to respect the browser-height row.

Due to the overlay being active only when navigating within the site (i.e. not when you arrive from google or another link) it's important that both "versions" of the page behave in the same way.

I hope that all makes sense - Any ideas what I am missing here?

Thanks for all your brilliant work and help so far!

Thanks for your help @arminunruh , unfortunately it doesn't seem to be working, the link still behaves as per the others...

Any ideas?

Hey @arminunruh I am also trying to achieve this and the can't get the script working...

Here is my index, hope you can help?
(It's the first project in the index that I'm testing with the ID) https://primaryworks.com.au/index/

Hi @arminunruh, I'm trying to achieve this as well.
The above doesn't seem to work, no matter what i put for the z-index of the .laynav elements and the .lay-project-overlay elements, the nav is always visible above the overlay...

What could i be missing?

@alasdair17 Thanks, it works!

Looks like I had the "img" and class the wrong way around...

Cheers :)