Lay Theme Forum

@alasdair17 This is a great idea to handle lightbox captions on mobile. maybe @arminunruh has already integrated an feature like "show caption beneath image on mobile" when the lightbox is turned off on mobile?

Another way would be to get into lightbox settings and set "Image File Caption" as the Default Caption for the Lightbox. You can then give your Image in the Media Section a Description that will be used as Lightbox caption. The following code that goes into Custom CSS/HTML in the Head section will do the rest.

<script>
function addCaptionsForMobile() {
    // Check if the HTML tag has the class "phone-size"
    if (jQuery("html").hasClass("phone-size")) {
        // Select all divs with the class 'img' that have a data-lightbox-caption attribute
        jQuery(".img[data-lightbox-caption]").each(function() {
            var $div = jQuery(this);
            var captionHTML = $div.attr("data-lightbox-caption");
            
            if (captionHTML) {
                // Check if the caption is already appended to avoid duplication
                if ($div.find(".custom-caption").length === 0) {
                    // Create a new element for the caption and add it to the div
                    var $caption = jQuery('<div class="custom-caption"></div>').html(captionHTML);
                    $div.append($caption);
                }
            }
        });
    } else {
        // Remove captions if switching to a non-mobile layout
        jQuery(".custom-caption").remove();
    }
}

// Run the function when a new page is shown
window.laytheme.on("newpageshown", function() {
    addCaptionsForMobile();
});

// Add a resize listener to recheck the layout on window resize
jQuery(window).on("resize", function() {
    addCaptionsForMobile();
});
</script>

maybe:

 .thumb .title{
 white-space: nowrap;
 transform: translateX(-50%);
 }

Than can move the text to the left by 50 percent of its length. You can adjust this value.

@PatFontebasso nice photos on your website! I think for this animation you would need a js script that scales the image according to the scroll-position.

I made this here with the logo, but it gets smaller on scroll.
https://sanmedicus.de

you can use the website codepen.io to mess around and build sketches before implementing it to lay theme.

@weodeo in your fiddle, you use symbols such as "$", that have to be translated to something else in lay theme. Would be useful if you post your code here.

"If you don't want a single element to transition, add the class "no-animation" to that Element. Right click the element in the Gridder, choose "Edit HTML class and id" and enter "no-animation"."

@Eeva try this in custom css:

 video {
     -webkit-mask-image: -webkit-radial-gradient(white, black);
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
 }

Thank you @ffinger. In general, you can explore such features by using the inspection mode of your browsers developer tools.

In this case, it was made with Javascript in the Custom Head Content section of Laytheme: A klick on the Button changes the height of the text element.

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery(".infobutton").click(function () {
jQuery(".textfield").css("height", "52%");
});
jQuery(".closebutton").click(function () {
jQuery(".textfield").css("height", "0%");
});});
</script>

@alasdair17 it seems you can use <span class="my-class">Second Row</span> and add a custom css style for this class.

For example:

.my-class{
font-size: .8rem;
}

@mr-do this effect is called "mix-blend-mode" with the setting "difference" and a white color for the icon that you can apply with custom css.

@emresenoglu try to use that for your custom video class:

position: absolute;
top: 0;
right: 0;
width: auto;
height: 100vh;
aspect-ratio: 1;

But you have to reflect if this is the best approach webdesign-wise, also considering mobile and tablet layouts.

@j36g2 maybe these color-planes are very high, like three times the window height, and the text inside these planes has "position: sticky; top:0;" Then you have to fiddle with some custom css to align them one after each other.

@panteley try this:
transform: translateX(-50%)!important;

maybe this forces your style to be applied at page load.

@panteley

Add this to your main-text-cover css:

left: 50%!important;
transform: translateX(-50%);

@Brief put this in your custom css for mobile:

 .flickity-prev-next-button{
 display: none;
 }

@linazangers have you checked in the lay options -> carousel add-on the settings for vertical alignment of slides?

try a !important after your color, like:
color: #ffffff!important;

or manipulate this, in the inspection you can see that this is where the actual color is declared:

.sitetitle-txt-inner {
color: #000000;
}

@pipaslol reagarding your first question:
when making the element fixed you would also have to give him a "width", "left", "padding" etc. to make it look like you want, because by "fixed" it gets taken out and placed on top of all content.

I would say you don't need a notice for cookies that are necessary to technically run the site. I would say that is the case here.

Apart from that you need a Privacy Statement where you say that these cookies are set.

That would be my approach, but without legal liability.

Felix

@lortnok you might want check out woocommerce hooks.

this goes into functions.php of your theme:
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

this goes into your php file for the desired page:
<?php woocommerce_breadcrumb(); ?>

But I don't know if it works with lay theme this way. Maybe you set up a dummy website and fiddle with it.

@arminunruh i suppose this could be integrated "easily", maybe you put it on your list :-)