Aimee LaPlant – web dev, reviews, pop culture and comic books!

I’ve noticed when using Safari, the WordPress Thickbox will display a very pretty dropshadow that really adds volume to the ugly looking box. I wanted the dropshadow to appear in FireFox, Internet Explorer, and the likes, but couldn’t find a WordPress plugin that did that.

I went out of the WordPress realm and searched for a code that includes a crossbrowser dropshadow for Thickbox. Then, I manually implemented the dropshadow into the WordPress thickbox. Alas, I found pradeepsathyan.com’s jQuery Thickbox with Shadows. Check out the demo provided on his post, then download sample.

Get out your WordPress files in /wp-includes/js/thickbox. Take out thickbox.css and thickbox.js because those are the two files we’re going to edit. Make sure to save a backup.

Unzip the “jQuery Thickbox with Shadows” files that you just downloaded, and in thickbox.css, find these lines of code:

div.fancy_bg {
    position: absolute;
    display: block;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}

div.fancy_bg_n {
    top: -18px;
    width: 100%;
    height: 18px;
    background: transparent url(images/fancy_shadow_n.png) repeat-x;
}

div.fancy_bg_ne {
    top: -18px;
    right: -13px;
    width: 13px;
    height: 18px;
    background: transparent url(images/fancy_shadow_ne.png) no-repeat;
}

div.fancy_bg_e {
    right: -13px;
    height: 100%;
    width: 13px;
    background: transparent url(images/fancy_shadow_e.png) repeat-y;
}

div.fancy_bg_se {
    bottom: -18px;
    right: -13px;
    width: 13px;
    height: 18px;
    background: transparent url(images/fancy_shadow_se.png) no-repeat;
}

div.fancy_bg_s {
    bottom: -18px;
    width: 100%;
    height: 18px;
    background: transparent url(images/fancy_shadow_s.png) repeat-x;
}

div.fancy_bg_sw {
    bottom: -18px;
    left: -13px;
    width: 13px;
    height: 18px;
    background: transparent url(images/fancy_shadow_sw.png) no-repeat;
}

div.fancy_bg_w {
    left: -13px;
    height: 100%;
    width: 13px;
   background: transparent url(images/fancy_shadow_w.png) repeat-y;
}
*html div.fancy_bg_w{
    height:100%;
}

div.fancy_bg_nw {
    top: -18px;
    left: -13px;
    width: 13px;
    height: 18px;
    background: transparent url(images/fancy_shadow_nw.png) no-repeat;
}

Copy and paste the above code into your original WordPress file .  Place it after #TB_window. Save your edited WordPress thickbox.css file and close.

Remember that the variable sign in solo jQuery is $, and the variable in WordPress jQuery is jQuery. So, we’ll need to do a little editing. Open the non-WordPress thickbox.js file you just downloaded and find these lines of codes:

$('<div id="fancy_bg"><div class="fancy_bg fancy_bg_n"></div>
<div class="fancy_bg fancy_bg_ne"></div><div class="fancy_bg fancy_bg_e"></div>
<div class="fancy_bg fancy_bg_se"></div><div class="fancy_bg fancy_bg_s"></div>
<div class="fancy_bg fancy_bg_sw"></div><div class="fancy_bg fancy_bg_w"></div>
<div class="fancy_bg fancy_bg_nw"></div></div>').prependTo("#TB_window");

We’re going to change the $ to jQuery and the ” “ to ‘ ‘:

jQuery("<div id='fancy_bg'><div class='fancy_bg fancy_bg_n'></div>
<div class='fancy_bg fancy_bg_ne'>
</div><div class='fancy_bg fancy_bg_e'>
</div>
<div class='fancy_bg fancy_bg_se'></div>
<div class='fancy_bg fancy_bg_s'></div>
<div class='fancy_bg fancy_bg_sw'>
</div><div class='fancy_bg fancy_bg_w'></div>
<div class='fancy_bg fancy_bg_nw'>
</div></div>").prependTo("#TB_window");

Take your newly edited code and add it to these lines on your WordPress thickbox.js file (it’s around Line 125 for me):

// End Resizing

TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'>
<img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>"
+
"<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "
<a href='"+url+"' id='TB_FullSize' title='Full Size' target='_blank'>Full Size</a>
</div></div><div id='TB_closeWindow'> <a href='#' id='TB_closeWindowButton' title='Close'>Close</a></div>");
ADD THE EDITED CODE HERE:
jQuery("<div id='fancy_bg'><div class='fancy_bg fancy_bg_n'>
</div><div class='fancy_bg fancy_bg_ne'>
</div><div class='fancy_bg fancy_bg_e'></div>
<div class='fancy_bg fancy_bg_se'>
</div><div class='fancy_bg fancy_bg_s'>
</div><div class='fancy_bg fancy_bg_sw'></div><div class='fancy_bg fancy_bg_w'></div>
<div class='fancy_bg fancy_bg_nw'></div></div>").prependTo("#TB_window");

Last and final stop, you’ll need to upload the shadow images you downloaded from the jQuery with Thickbox for Shadows. If you haven’t already, make a directory in /wp-includes/js/thickbox/ titled images, then upload the shadow images into there.

And there you have it, a very nice WordPress Thickbox with dropshadows for all browsers, except for Internet Explorer 6 (it won’t show the transparent .png’s). Quite frankly, I don’t care about IE6 compatibility anymore.

Special thanks to pradeepsathyan.com’s jQuery Thickbox with Shadows.

Just remember to save your new Thickbox files before you upgrade WordPress anytime soon.

I don’t use Thickbox on this site, but to see a working demo of the WordPress Thickbox with Shadows, check out my other site: EmmaFrostFiles.com.