Hi all,
I have to change the whole application to black and white when the user clicks a button. I added the below snippet to the page css and added it to styles. But this is being overridden by the styles of the button and other components.
.filtered
{
filter: grayscale(100%) !important;
}
Even after !important, the overriding happens. Please advise
Hi Abirami,What containers and other components are overwriting your filter?As I tried on my side and I don't see anything overwriting the filter. This is what I did:Add a javascript to the page
document.addEventListener("DOMContentLoaded", function() { document.body.classList.add('gray-scale') });
and have a the following css rule in my css
.gray-scale { filter: grayscale(1); }
that seems to work for me
Hi Abira,You could try adding the filter class on the body tag
I tried adding a javascript "document.body.style.filter = grayscale(100%)" but the container and other components style properties overwrites the body property. How can I avoid this?
Can you provide OML?
Hi Abirami,
Here is a quick OML
Thank you so much, Eric :)
You are very welcome
that code can be put on body tag:
<body style="filter: grayscale(1);">