WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] Remove Grey Effect (5 posts)

  1. JuanAcosta1992
    Member
    Posted 1 year ago #

    Hi, your theme is one of the best themes. The grey effect on featured images is great but the people I work with want it off. Is there any way to do this? What do I have to remove from the code without breaking the theme?

    Thank YOu

  2. JuanAcosta1992
    Member
    Posted 1 year ago #

    I forgot to mention, I tried the solution from another forum post and it worked. But i still want to maintain that shadow effect where the image seems to pop forward because of the shadow. I still want that but without the image being grey. Is that possible?

  3. CrouchingBruin
    Member
    Posted 1 year ago #

    But i still want to maintain that shadow effect where the image seems to pop forward because of the shadow.

    I don't know what your modification was to remove the grey overlay, but did you leave the thumb-shadow DIV intact in postformat.php?

  4. JuanAcosta1992
    Member
    Posted 1 year ago #

    I wasn't able to do it. I must have marked "resolved"by accident. Do you have any idea on how to just get rid of the grey and maintain the frame with the shadow?

  5. CrouchingBruin
    Member
    Posted 1 year ago #

    In posts.css, you want to change this:

    .hentry:hover .thumb-shadow {
    	background-position: center bottom;
    }

    to this:

    .hentry .thumb-shadow {
    	background-position: center bottom;
    }

    (i.e., you just remove the :hover from after .hentry. This will display the shadow under the thumbnail.

    Then, also in posts.css, you want to comment out (or remove entirely) this section:

    .post-thumb img.img_grayscale {
    	filter: 					grayscale(100%); /* Current draft standard */
    	-ms-filter: 			grayscale(100%);
    	-o-filter: 				grayscale(100%); /* opera */
    	filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
    	filter: 					gray; /* IE */
    	-webkit-filter: 		grayscale(1); /* Old WebKit */
    	-webkit-filter: 		grayscale(100%); /* New WebKit */
    }

    What this does is set the top layer of the thumbnail (the img_grayscale layer) to gray, so we'll just comment it out so the top image is color.

    That is, the thumbnail is comprised of two identical images, one on top of another. The top layer is set to gray using the CSS above, and the opacity is initialized to 1, while the bottom image remains color, but the opacity is set to 0 so you can't see it. When the mouse moves into the area of the post, there's a JavaScript event handler which gradually changes the opacity of the top, gray image from 1 to 0 (making it clear), and the opacity of the bottom, color layer from 0 to 1 (so it becomes visible).

    The only thing left is to add a line to your JQuery code in the Bottom field of your Head section (your code area is growing quite large, now). Add this line before the ending brace of the ready function:

    $('.hentry').off("hover");

    What this does is remove the previously mentioned event handler for when the mouse enters the post area, so it doesn't try to animate the thumbnail transition.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic