Lay Theme Forum

Dear @lortnok
we will write it down for the future to use z-index in the gridder.

Best!

Marius

Hi Florian!

Sure! Have a look here:

https://www.w3schools.com/cssref/css3_pr_transform.asp

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

you can add the code to your custom CSS.

Good luck!

Marius

Dear @Hayo-Gebauer

Have a look here:

jQuery(document).on("click", ".clickme", function(event) {
jQuery("body").toogleClass("dark-mode-on");
});

This toggles a class called "dark-mode-on" in the top of your page.

You can then use CSS with children elements to make the change. For example:

.dark-mode-on .site-title {
color: red;
}

.dark-mode-on ._Default {
background-color: yellow;
}

Just to give you a rough idea…

Hope that helps!

Best!

Marius

Dear @logancollins
I will write it down for future improvements!

Good point!

Best!

Marius

Dear @sebastianpetrov

ok, I can see what you mean.

Try to add this into your CUSTOM CSS code:

.html5video video {
    object-fit: contain;
}

Berst!

Marius

Dear @piero101
have a look here:

.mobile-nav .current-menu-item {
    display: none !important;
}

Best!

Marius

Dear @flob13
we agree. A filter would be good.

We have it written down for future improvements.

Best!

Marius

Dear @EN
good point. We will write that down.

Best!

Marius

Hi Plateau!
Still developing the new version of LayTheme.

We have many things and features to implement :-)

Best!

Marius

Dear @edgrbnz
thank you for the valuable information 🙂

Dear @alexpko
yes. We will write this don for the future!

Best!

Marius

Dear @neunzehnachtneun
happy it works!
Best!

Marius

Dear @edgrbnz
we will have a look if this is possible to be implemented in a short time.

Thank you for the tip!

Best!

Marius

Dear @lauramas
can you provide a link that we can have a look?

Best!

Marius

Dear @hgbnd
no news yet. But it is on our list.

Best!

Marius

Dear @Organstudio

that should work:

.img a img{
transition: all 300ms ease;
}

.img:hover a img{
filter: brightness(0.9);
}

.img a .caption{
opacity: 0;
transition: opacity 300ms ease;
}

.img:hover a .caption{
opacity: 1;
}

Let me know!

Marius

Perfect! Happy to hear!

Dear @Toby

this works:

.red {
    background: red !important;
}

.blue {
    background: blue !important;
}

<script>
window.laytheme.on("newpage", function(layoutObj, type, obj){
    
    jQuery(document).on("mouseenter", ".thumb", function(event) {
    
        var category = jQuery(this).attr("data-catid");
    
        if (category == 1) {
            jQuery("body").addClass("red");
        }
    
        if (category == 2) {
    	    jQuery("body").addClass("blue");
        }
    });
    
    jQuery(document).on("mouseleave", ".thumb", function(event) {
        jQuery("body").removeClass("red");
        jQuery("body").removeClass("blue");
    });

});
</script>

All the best!

Marius

Dear Toby,

may I ask you to post the code in the this formatto this thread. And also make it as readable as possible for me. Breaks etc.
Otherwise I need to do a surgery which costs a lot of time.

Thank you

Marius

Dear @Toby

this is the way to go:

The code you just posted is already a step backward.

Please try this code and let me know where the problem is.

All the best!

Marius

@mariusjopen said in Background colour change on rollover:

Hi @Toby

add this to your CUSTOM HEAD CONTENT:

<script>
window.laytheme.on("newpage", function(layoutObj, type, obj){

jQuery(document).on("hover", ".thumb", 
  function(event) {
  
  	jQuery("body").removeClass("red");
    jQuery("body").removeClass("blue");
    
    var category = jQuery(this).attr("data-catid");
    
    if (category == 1) {
      jQuery("body").addClass("red");
	  }
    
    if (category == 2) {
   		jQuery("body").addClass("blue");
	  }
    
  }
  
);

});
</script>

and this to your custom CSS:

.red {
  background: red !important;
}

.blue {
  background: blue !important;
}

I have two projects with two different categories.
If you inspect the thumbnails they are called 1 and 2:

I placed the images as project thumbnails:

You will probably need to adjust the code.
But this is the base and you can go on from there.

Good luck!

Marius

Hi @Toby

as far as I understood – you wanted that the background is changing to a specific color when you hover a category, right?

This is not happening in your example.

Are we talking about the same thing?

All the best!

Marius