Search code examples
wordpresshovereffect

Find and Remove Grayscale Effect from Wordpress Gallery

I've been banging my head all day, and still can't find the solution!

URL: http://wmy.2ec.myftpupload.com/gallery/

I want to remove the Grayscale effect from the Gallery thumbnails, I've tried searching for CSS code, PHP code, nothing to my avail.

Solution

  • I'll walk you through the diagnostic process for this. Open up DevTools by right clicking on an element you want to debug and choosing Inspect.

    Click up the DOM tree until you find an element that appears to have the CSS properties you're looking to adjust.

    In your case it's relatively straightforward, the img tag has a filter: grayscale(1) property set:

    Screenshot of dev tools

    If you're using a Child Theme, you can most likely edit that line of your CSS file, and you're done!

    If you're aren't, or you're unsure, you can add CSS in the Appearance > Customize > Additional CSS section of your site (or wherever else your theme/plugins allow you to place CSS or "Header Scripts")

    You'll need some CSS that's got a higher specificity to override that CSS. You can usually just copy the highlighted selector and add body in front of it, or add an ID somewhere that exists. Avoid using !important unless you absolutely have to (overriding inline-styles or other baked-in !importants that you can't remove).

    Adding

    body .tm-pg_front_gallery .tm-pg_front_gallery-masonry .tm_pg_gallery-item a img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

    or

    body .tm-pg_front_gallery .tm-pg_front_gallery-masonry .tm_pg_gallery-item a img,
body .tm-pg_front_gallery .tm-pg_front_gallery-grid .tm_pg_gallery-item a img,
body .tm-pg_front_gallery .tm-pg_front_gallery-justify .tm_pg_gallery-item a img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

    Should give you the result you're looking for: screenshot of results