WordPress Montezuma Theme Featured Image Fix

Our blog here at Iron Summit is happily powered by WordPress, and as many of you may already be aware of, we are using the Montezuma Theme. It is an awesome theme, except for one massive compatibility issue with most browsers other than IE, that is the landing page showing thumbnails of the featured images of your blog posts overlaps the text and makes it unreadable. What the thumbnails are supposed to do can be seen if the theme is viewed on IE. There is a nice shadowy overlay to the image which, once moused over, reveals the color image. It’s a nice design, but it doesn’t work in other browsers.

Never fear however, because we have found a simple fix that anyone can do, and we will explain it step by step below!

Montezuma Thumbnail Fix

Define a height within the .post-thumb CSS class to fix this issue.

To fix this pesky bug, first login to your WordPress site and go to Appearance -> Themes -> Montezuma Options. Once you are here, go to the “CSS Files” section in your Montezuma Options and click on “posts.css”.

Now comes the fun part, where you get to edit some code. The chunk of code that we will be editing is a CSS class that defines the box that the thumbnail image is placed within. Again, this is a simple fix (which is ugly I might add) but it makes the nice shadowy thumbnail with its hover effect work in browsers other than IE. Enough with the talk, here is the code.

Find this chunk of code:

.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;
}

and define a height in there of 185px, which will work well with the default height of the thumbnails. To do this, just replace the code above with the code 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;
}

Again, it’s not pretty, it’s not perfect, but it makes it work. I spent quite a bit of time searching around for a fix to this problem and only found things that removed the formatting entirely, leaving  me with just an image to click on (without the nice overlay effect), but this new fix will allow you to preserve the effect and use Montezuma in all of its glory!

You can see this fix here on the Montezuma support forum thread that I made on the official WordPress.org website. I hope this helps some people out, happy blogging!

David is a Managing Partner at Iron Summit Media Strategies, an Orlando web design company.

  • IronSummitMedia

    It seems that the Montezuma team has updated this problem in their latest version of the theme. We also created our own custom theme for our blog. Thanks for reading though!