Coupon Ninja
Thursday, May 15th, 2008
I just discovered the CouponNinja website and completely fell in love with the header images:
It makes me snicker every time I look at it.
Via Design Shack.
Gallery of Doodles in Lightbox 2
Friday, April 4th, 2008
NerdStarGamer now has a new Gallery page that features my doodles:
All of the images have been set up as a list of thumbnails which use Lightbox 2 to display large versions.
I spent a little extra time to set up Lightbox on this blog without using a plugin. I’ve been on a steady crusade to get rid of most of my plugins for quite some time. Setting up Lightbox in WordPress was fairly straightforward.
After downloading the Lightbox 2 files, I created a new directory in my template directory called lightbox and dropped all of the lightbox files into it. I then put a function call into the header.php file right before the line that reads <?php wp_head(); ?>.
<head profile="http://gmpg.org/xfn/11">
...some other tags...
<?php AKM_include_lightbox(); ?>
<?php wp_head(); ?>
</head>
The AKM_includ_lightbox(); function is just a short little function that I wrote and put in the functions.php file of my template. Here is the function:
function AKM_include_lightbox() {
$lbDir = get_bloginfo('template_directory') . "/lightbox";
// Echo out some file path variables for images used lightbox JS
$output = '<script type="text/javascript">' . "\n";
$output .= "\t" . 'var tplDir = "' . $lbDir . '";' . "\n";
$output .= '</script>' . "\n";
// Echo links to js and css for lightbox
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/prototype.js"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/scriptaculous.js?load=effects,builder"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/lightbox.js"></script>' . "\n";
$output .= '<link rel="stylesheet" href="' . $lbDir . '/css/lightbox.css" type="text/css" media="screen" />' . "\n";
echo $output;
}
This first line of the function sets up a variable that includes the path to the Lightbox files inside my template directory. This is necessary because the lightbox.js file needs to reference the images included in the Lightbox folder. Without this part, the previous, next and close images will not show up because the link will be going to your WordPress uploads directory.
That second chunk of text in the function echos out a small bit of JavaScript into your header that simply declares the variable tplDir and sets it to the path to your LightBox installation. The last chunk of text inserts all of the necessary Lightbox JavaScript and CSS links into your header. I could have written all of this directly into the header.php file, of course, however I felt that my file was getting a bit messy and that this approach was much more clear.
We also need to make a small edit to the lightbox.js file which is going to use that tplDir variable we set. Find the line in the beginning of the file like this (around line 49):
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Simply change those two lines to this:
fileLoadingImage: tplDir+'/images/loading.gif',
fileBottomNavCloseImage: tplDir+'/images/closelabel.gif',
That completes the Lightbox 2 setup in WordPress without using a plugin. Now all you have to do is add the rel="lightbox" tag to any link you want to use Lightbox. For example, if you have a thumbnail image that links to a larger image like this:
<a href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
To add the Lightbox effect, just add in the attribute like this:
<a rel="lightbox" href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
Be sure to check out the Lightbox 2 page for more information on what you can do with it.
The Superest
Friday, April 4th, 2008
The Superest is a very funny running blog of illustrations of superest heros. Each superest hero plays off of the last in a very clever way:
The Superest is a continually running game of My Team, Your Team. The rules are simple: Player 1 draws a character with a power. Player 2 then draws a character whose power cancels the power of that previous character. Repeat.
The design of the site itself is is quite elegant and simple. Most of the display type on the site is done in a very nice typeface:
Start from the beginning get the the feeling for the way the superest heros flow one after another.
Typography for Seed Conference Website
Tuesday, April 1st, 2008
The new website for the 3rd Seed Conference in Chicago is sporting some excellent typography.
The type really looks elegant and nice. This is all done with CSS styles and no images. It’s a great example of what can be done with web typography.
Via Daring Firebal.
Multi Columns in websites
Wednesday, March 19th, 2008
For the past couple of months I’ve been working on creating a new website that uses WordPress as a CMS for the organization Girls Get Connected (That’s the old site, because the new one isn’t quite done yet). The project has been a great one to work on because I’ve gotten to do everything including the design of the site and development of the WordPress back-end and templates.
Early on in the project, after the design mockup had been approved, I knew there were going to be some difficulties implementing it. One of the things that I knew would be a problem was the fact that I had designed a rather prominent section on the home page of the site which called for an article to be split into multiple columns. This being a content managed site, I also knew it wasn’t really going to be an option to ask the end users to break up their articles into two even sections so that it would make nice and pretty columns. Also, CSS3 really wasn’t an option, since this site would have to work on all current browsers. Something else would have to be done.
The solution I ended up using was a very elegant JavaScript program written by Randy Simons. The script is called Multi-Column Text and is pretty easy to implement. It automatically splits the text into multiple columns (you chose how many), and includes support for liquid layouts. This means that the content and columns aren’t static; they will automatically adjust as the page is resized. Check out the demonstration page to see what I mean. This script is also works on enough old browsers to actually be usable.
What impressed me most about the script was that it requires very little extra markup. Assuming all of your markup is in some sort of standards compliant state, all that is required is one (or possibly two) extra div tags. Say you wanted to make the following code segment use the multicolumn script:
<h2>Maecenas</h2>
<p>Pellentesque mi. In lacinia iaculis ante.</p>
<h1>Ut dapibus</h1>
<p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
<p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
<p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>
All that needs to be added are two div tags to wrap the content. The first div must also include an id or class name for the JavaScript to hook to. You can use whatever class or id name you want when you implement it. I chose to use id=multicolumn. The finished markup would look like this:
<div class="multicolumn">
<div>
<h2>Maecenas</h2>
<p>Pellentesque mi. In lacinia iaculis ante.</p>
<h1>Ut dapibus</h1>
<p><em>Nunc non dui.</em> Maecenas quis lacus sed dui commodo elementum.</p>
<p><strong>Pellentesque rhoncus sollicitudin libero. Phasellus nunc risus, tincidunt vel, bibendum eu, molestie ac, tortor. Etiam in felis.</strong></p>
<p><strong><em>Pellentesque id erat. Mauris condimentum pharetra nibh. Fusce sollicitudin auctor tortor. Aliquam placerat,</em></strong></p>
</div>
</div>
I like the way that looks: clean and simple. You can even use this in in a WordPress template with PHP tags included and everything still works. This is what is actually coded into one of my WordPress template files:
<div class="multicolumn">
<div>
<?php ggc_the_long_excerpt(); ?>
<p class="readmore"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Read More »</a></p>
</div>
</div>
My favorite part is what happens when Javascript is not available. In my case, the page still works fine and no content is lost. Sure, there are some rather long line lengths, but everything still works.
