I was porting the Expression Blue WordPress Theme over to the Thesis framework (released on Thesis Themes here) and started work on the #multimedia_box which controls pieces of multimedia content above the sidebars.
I noticed that if you changed the size of the #multimedia_box itself, the image still came through as large as it wanted. Bit of an issue that though, especially if you style the #multimedia_box and subsequent #custom_box, #image_box, #video_box inside it (and subsequently content further inside that, such as an image). So in my case the image was sticking out the side rightways because I had added margin to #multimedia_box and padding to #image_box.
The solution to this is a bit of jquery inside the header, which of course you have to put in the custom_functions.php and use a hook to access the wp_head(), like so:
var imageBoxWidth = $(“div#multimedia_box > div”).width();
$(“div#multimedia_box > div”).css(‘padding’,’10px’);
$(“div#multimedia_box > div img”).width(imageBoxWidth – 24);
In my case I had added 10px padding, then there’s 1px padding and 1px border on the image itself giving you the 24 that you see in the code snippet above.
Tags: jquery, multimedia_box, thesis