move the Shadowbox.js close button to the upper-right

codeShadowbox.js is the coolest JavaScript lightbox I’ve come across. The only thing I wanted to change was to put the “Close” button in the upper-right corner, where most users are used to looking for it. After crusing their forums, I discovered I wasn’t the only one that wanted this feature. So, I dove into the code and made the necessary adjustments, and of course, afterwards, I decided to document it here so that others could use it too. Here’s how to do it…

First, find this part in the Shadowbox.js code that writes the HTML into the page…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div>

and edit it – moving the HTML for the “X” (close) button…

<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>

…into the upper div #sb-title, just after #sb-title-inner, like so…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div>

then, add this stuff to your Shadowbox.css file AFTER all the other styles…

#sb-title-inner {
width: 90%;
}
#sb-nav-close {
float: right;
width: 16px;
height: 16px;
display: block;
margin: -20px 0px 0px 0px;
background: url(close.png) 2px 0px no-repeat;
cursor: pointer;
}

…and that’s it.

Let me know in the comments if this worked for you…

User Photo plugin not working? – try this…

wordpress-logoOnce again, I recently ran into a situation where something cool that I was developing worked just fine when run locally using MAMP. But then, when i uploaded everything to my server, things did not work as expected.

This will be a short one.

In this case I am using the User Photo plugin v.0.9.4 and WordPress v.3.0.4. I have a place on my single post page(s) (single.php) where I want to show a tumbnail of the author’s photo using the following code…

<?php userphoto_the_author_thumbnail(); ?>

…and it just was not working. After doing the usual bit of googling, I discovered this thread on the WordPress support forums where I found my solution – thanks to user dragunoff (Ivaylo Draganov). It turns out the issue is apparrently linked to wether or not a user photo should be held for moderation or not depending on their user level.

the fix…

At approximately line 120 in the User Photo plugin file “user-photo.php”, located at /wp-content/plugins/user-photo/, there is a function called “userphoto__get_userphoto”. About 3 or 4 lines down in that function you’ll see this line of code…

if(($userdata->userphoto_approvalstatus == USERPHOTO_APPROVED) &&

All we need to do is add 2 forward slashes – “//” – after the first open parentheses to comment out this first condition in the “if” statement, like so…

if( // ($userdata->userphoto_approvalstatus == USERPHOTO_APPROVED) &&

…and all should work fine.

What we’re really doing is removing the check for approval status from administrator moderation. So, don’t use this hack if you have a site where users could potentially upload some “questionable” user photos.  ;-)


update: 02.18.11 – this also works with User Photo plugin v.0.9.5 and WordPress v.3.0.5.

get the top parent category in WordPress

wordpress-logoHere’s a cool little scrap of code to get the name of the top parent category in WordPress. This is another one of those things i spent a good deal of time trying to find through a lot of web searching. I finally came across a post somewhere (can’t remember where anymore) which had the solution I was looking for. I’ve just changed some of the wording (for my own benefit) and have posted it here. This will get the top parent category name, no matter how many levels deep in the category heirarchy you might be. To get this up and running, just add the code below to your functions.php file…

<?php
function get_parent_category_name($cat) {
$parentCategoryList = get_category_parents($cat, false, ',');
$parentCategoryListArray = split(',', $parentCatList);
$parentName = $parentCategoryListArray[0];
$stuffToReplace = array(' ' => '-', '(' => '', ')' => '');
$parent = strtolower(strtr($parentName,$stuffToReplace));

return $parent;
}
?>

Then, put this bit in your template where you want to place the top parent category name…

<?php get_parent_category_name($cat); ?>

This function returns the category “slug”.
To return the actual category name, replace the last line in the block of code above with this…

    return $parentName;

Have fun…