Bluelime Media Vancouver Web Development » Web Design

Incorporate Cufón in WordPress

Christine — Tue, 08 Sep 2009 16:08:53 +0000

Every once in a while comes a project where using a font other than verdana, arial, trebuchet or tahoma would be nice. I recently finished a website for Tod Maffin where, Rob, the designer chose Sansa Condensed as the font of choice for headings. I could have created images for all of the page headings, but I wanted to give Tod the ability to update them if he chose to and more importantly, I also wanted to use the same font for the headings of blog posts. After reading about the alternatives, I decided to give cufón a try and was quite surprised to discover how easy it is.

Here are the steps required to integrate cufón in your wordPress site:

Step 1 – Get cufón
Visit the cufón website and download the YUI-compressed version of cufón. Save this js file in a js folder in your wordPress theme.

Step 2 – Generate your font file
Follow the steps on the Cufón website and add the generated js file to your js folder in your wordPress theme. You’ll be required to upload your font files and thus you need to have purchased them as well as verified that your fonts are legal to use in font embedding. Upload your js folder in your wordPress theme via FTP.

Step 3 – Add the code to your wordPress template
To use cufón, simply add the following lines of code to your header.php file.

These few lines of code will convert all of your h1 and h2 into my selected font. That’s it.

How to use Slimbox plugin to display your portfolio in WordPress

Christine — Wed, 22 Jul 2009 16:59:20 +0000

If you’ve been following the Bluelime Media website you will know that we’ve partnered with Barbara from BlueCitrus on many occasions to develop websites and as the saying goes, “The son of the cobbler has no shoes“, the BlueCitrus website was in need of a facelift. My latest teaching gig at Langara provided me with the opportunity to design and develop a WordPress site for Barbara. The goal of the class was to teach the students how to use WordPress to create a portfolio. So building a site for Barbara was the perfect project.

Barbara laid the ground work and designed the header, navigation and gave me a good indication of how she wanted the site to work, but I was given carte blanche on how to make the portfolio work. After looking at numerous portfolio examples, I came across the stunning work of Koldo Barroso. Koldo’s illustrations are simply marvelous and I could look at them all day. His portfolio section is simple, yet very elegant. On closer examination of his site, I noticed that he uses Slimbox to display his gallery pieces which is just a slimmed down version of the original Lightbox.

A few clicks later, I read a few tutorials on how to use Slimbox and decided to use it to build it Barbara’s portfolio section. If you’re familiar with WordPress plugins, you’ll know that beyond how to install and activate, instructions are usually fairly slim when it comes to how to use them. Since I just finished the site and the steps I took are still fresh in my mind, I thought I’d walk you through on how to set your own gallery using the Slimbox Plugin.

Step 1:
Download the Slimbox plugin, upload it to your plugins folder and activate it.

Step 2:
Get your portfolio images ready. During the design process, I came to the decision of making my large images 500px x 405px and the thumbnails 110px x 80px. In my WordPress admin, under Media, I set the size of my thumbnails to 110px and 80px. I then proceeded to create all of the portfolio images and uploaded them using WordPress’s media tool. During this process, WordPress automatically created corresponding thumbnails and added a -100×80.jpg extension to them. The thumbnails weren’t exactly as Barbara had hoped for, so I downloaded them all, she tweaked them in Photoshop ensuring the the same names were kept, I then re-uploaded them to the server and replaced the old ones.

Step3:
Once the images in the media library, it was time to add them to the WordPress Websites Page. I opted for a unordered list of items to display the thumbnails.

Using the image insert tool, I selected the image to show, fine-tuned the title of the image, ensured that the file url was selected, selected the thumbnail size and clicked insert into post.

Which gave me the following line of code.

In order to activate the lightbox, I then inserted rel=”lightbox” to the anchor tag.

In order to display the caption under the image a title must also be added to the anchor tag.

This code now works perfectly, but you probably want to display more than one image. All you need to do is repeat the process and modify the relative attribute. Instead of using rel=”lightbox” I used rel=”lightbox-website” on all anchor tags. Modifying the relative attribute this way activates the previous and next links on the images.

You’ll notice that on Barbara’s website, once you view the images in the lightbox, you can read the title of the image but also visit the website by clicking the link. To do this, you need to add the link to your title.

So you might be tempted to using something like:

title="Portfolio Piece 1 - visit website"

But you will soon find out that this doesn’t work. What you need to do is swap some of the characters for their html equivalent. For example, quotes (”) would be " and brackets (<) would be <. So your final code will be something like this:

Step4:
Once all your thumbnails are in place, you may want to adjust your style.css. Here’s what I used for the Bluecitrus website.


ul.thumbnails {width:520px; list-style:none; margin:0; padding:0;}
.thumbnails li {float:left; margin:5px 4px 5px 3px;}
.thumbnails img  {width:110px; height:80px; padding:5px; vertical-align:bottom;}
.thumbnails a {border:1px solid #D4D4D4; background:#FFF; display:block; margin-bottom:5px; float:left;}
.thumbnails a:hover img {background:#F9F9F9;}

You can see the final results here.

How green is your work place?

Christine — Thu, 14 May 2009 15:49:41 +0000

These days businesses not only have to provide needed services and solutions, they need to do it in an appealing matter. For most of us this “appealing matter” will include sustainable, viable, green solutions. Since 2001, Green Workplace has been working with organizations to track their resource consumption and reduce it. They’ve also implemented easy-to-use energy efficiency campaigns and delivered environmental skills training and education.

Located right here in Vancouver, BC, they are a great resource for small and large companies looking for solutions towards greener business.

Introducing Notch Hill Educational Products

Christine — Mon, 06 Apr 2009 17:27:19 +0000

Have you been searching for a way to help your child learn while playing a fun interactive game? Now you can, simply by spending just 15 minutes with Notch Hill Educational Products. These products are a great way to help your child build a strong educational foundation.

The products consist of a GamePak “The Nogs of Notch Hill” which is a learning program containing everything you need to help your child learn to read, write and sound the lower case letters of the alphabet and “Pam’s Patterns” which helps your child develop pre-alphabet learning skills, using simple pegboards.

Developed by Joan Thornton, these products were derived from a notion that children learn best whilst playing. While taking children for extra reading practice, Joan discovered patterns in the behaviours of the students who were struggling. She created games that practiced the skills the children were missing and began playing them with the children. The children loved the games, and began to learn fast in her care. Over the years she has given hundreds of children the gift of a solid academic foundation.

With the help of her daughter, Nicola Lott, the first Educational GamePak and a fun, informative website were recently released and plans are underway to create 8 more GamePaks taking children to a Grade three level in reading, writing and maths skills. Working with Nicola was very interesting and we wish them great success in their new business venture.

Free Easter Bunny Icons at Icon Dock

Christine — Fri, 06 Mar 2009 15:03:31 +0000

Just in time for Easter, Icon Dock has released a set of 40 free icons which you can use on your marketing material, blog, etc…

Check out their website for other great icons.