How to fix Thesis Image Framing Issues

Edit: With the release of Thesis 1.6, Chris has fixed the framing issue discussed below. If you’re still running 1.5, this post is still relevant. If not, not.

Today I stumbled across an annoying bug in Thesis 1.5.1 that stops image frames from displaying even when the Thesis options panel and individual WordPress post settings are set to display frames.

So, armed with my trusty DIYTHEMES FORUM username and password, I set out either to fix the problem or find a hack. It seems this is a problem a few Thesis users have been having under WordPress 2.8, and a simple hack is in place to make all your images look pretty again.

First off, not everyone will experience this (only us special people). It’s an intermittant problem. Second, the bug is likely to be stamped on in an upcoming release of v1.5.2. Until then, we can use CSS to work around the problem.

Here’s how to add the default gray frame around your images using CSS:

  1. Open your custom.css file (wp-content/themes/thesis_151/custom/custom.css) in your favourite text editor, or if you’re using Thesis Openhook (which you should be; it’s great), go to Appearance > Thesis Custom Styling in the WordPress backend.
  2. Find a space near the bottom and add the following CSS:

[sourcecode language='css']

.custom .headline_area .post_image {
padding: 1em;
border-width: 0.1em;
background:#EEEEEE none repeat scroll 0 0;
border-color:#DDDDDD;
border-style:solid;
}

.custom .format_text .post_image {
padding: 0.714em;
border-width: 0.071em;
background:#EEEEEE none repeat scroll 0 0;
border-color:#DDDDDD;
border-style:solid;
}

.custom .teaser .post_image_link .thumb {
padding: 0.8em;
border-width: 0.1em;
background:#EEEEEE none repeat scroll 0 0;
border-color:#DDDDDD;
border-style:solid;
}

.custom .format_teaser .post_image_link .thumb {
padding: 0.333em;
border-width: 0.083em;
background:#EEEEEE none repeat scroll 0 0;
border-color:#DDDDDD;
border-style:solid;
}

[/sourcecode]

Save your file using the ‘little ass save button’ in Openhook, or upload your custom.css file using an FTP client. This should fix your problem.

  • http://www.technoblogger.tk Technoblogger

    Thanks Dave…….i was facing problem with border customization. Finally after your trick it has been resolved……

  • simon

    i have been searching to 2 hours now to do something very simple.

    Replace the default color from grey to another color in the frames for pictures in posts and pages. Seems it would be very simple. But nothing found so far. The Default Grey is very ugly.

    • Dave

      Hi Simon, the frame color and border is housed in a couple of CSS rules, making it hard to find and isolate. You should be able to overcome it by adding a new CSS rule in your custom.css file that looks something like this:

      img.frame {background: #000 /* this is black */; }

      There’s also a border color which can be changed. Your CSS declaration would look like this:

      img.frame {background: #000 /* this is black */; border-color: #fff /* this is white */; }

      I hope this helps.