WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] [closed] Compatibility Issue with Chrome - Featured Image Overlapping Text (5 posts)

  1. IronSummit
    Member
    Posted 1 year ago #

    Hello!

    I have come across a compatibility issue with this template in Chrome. I have heard that it is effecting Safari and Firefox users as well. The bottom line is that the featured image thumbnail is overlapping the text due to the shadow effect not being compatible with Chrome (and possibly other browsers).

    One quick-fix that I have found for this problem essentially removes the shadow animation from the featured image thumbnail all together, which remedies the problem but also takes away from the design of the template.

    The fix was done by editing the 'postformat.php' file under Montezuma Options > Sub Templates > postformat.php

    The line of code that was fixed was the following:

    <?php bfa_thumb( 620, 180, true, '<div class="thumb-shadow"><div class="post-thumb">', '</div></div>' ); ?>

    Was changed to:

    <?php bfa_thumb( 620, 180, true, '', '' ); ?>

    This fix was originally crafted by juggledad over at bytesforall.com, here is a link to his post:

    http://forum.bytesforall.com/showthread.php?t=18607

    Again, this fix is NOT complete, it compromises the quality of the template. It simply removes the fancy animation from the featured image thumbnail which makes the template look worse in quality. I am either looking for a full fix to the problem (one that does not remove the shadow animation) or to notify the developer of the template that the shadow effect on the featured image thumbnail needs to be updated to accommodate all browsers.

    If anybody has found a way to fix this by editing the CSS I would be very appreciative if you could post the fix here! Thank you!

  2. nit37
    Member
    Posted 1 year ago #

    I recently installed montezuma theme for my site and i have also experienced the same issue in firefox.My post thumb image will be blank until your hover on it.The solution which the site bytesforall.com gave will fix the issue but the shadow animation in the post thumb will be removed.
    So to fix this issue go to your wordpress dashboard

    >montezuma options
    >CSS files and select posts.css
    Now search for the below code:

    .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 */
    }

    In the above code delete this line:
    filter:url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
    You can see my site computricks to see the changes.

  3. IronSummit
    Member
    Posted 1 year ago #

    Check out your site in Chrome and you'll see what I am talking about. That may fix it in Firefox, but not in Chrome. The original post I made cuts out the shadow effect/animation all together. I'm looking for something that preserves that effect and is cross compatible with Chrome/Firefox/IE.

  4. IronSummit
    Member
    Posted 1 year ago #

    I found a functional fix for the issue where you can preserve the shadowy box instead of getting rid of all the formatting.

    You can read about the fix here and see the full documentation, or you can keep reading because I explain it below as well.

    In the posts.css file under Montezuma Options > CSS Files > posts.css you will find the following class:

    .post-thumb {
    	margin: 0 auto 15px auto;
    	display: block;
    	padding: 6px 6px 5px 6px;
    	border: solid 1px #ddd;
    	border-bottom: solid 1px #ccc;
    	background: #ffffff;
    }

    To fix the issue I just defined a height. This might be bad form, but it worked in Chrome and in IE, I didn't check Firefox. The fix is below:

    .post-thumb {
    	margin: 0 auto 15px auto;
    	display: block;
    	padding: 6px 6px 5px 6px;
    	height: 185px;
    	border: solid 1px #ddd;
    	border-bottom: solid 1px #ccc;
    	background: #ffffff;
    }

    Hopefully this helps!

  5. dmkjr
    Member
    Posted 1 year ago #

    I don't have an issue with the height. However, I am having an issue with the width.

    Images that are smaller than 400px screw with the look. The border for the grayscale will be larger.

    Anyone else having this issue?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic