Caffeine Cam’s Coffee and Candy Company

The Caffeine Cam website is focused on selling Canadian candy and snacks to the states. It required a custom shipping calculation module, supporting fedex and USPS.

Yummy, yummy…

Designer:
Chris Savoie
Project URL:
http://www.caffeinecam.com/home

Tamarack Clothing eStore

This is an eStore for a Winnipeg clothing store.

A fun little bit that I discovered during the creation of this website is that you can give your links an underline with a color different than the font color itself (see primary navigation in the header), by giving the <a> tag a border-bottom instead of a text-decoration: underline;. The idea actually came from the implementation of the theme on this website, which uses the same technique.

Designer:
Chris Savoie
Project URL:
http://www.tamarackclothing.com/home

PGA Manitoba

Gallery

Highlights

The two highlights of this project for me were the several tricks for cutting out the images from a PSD file I learned, and the 2 user interfaces I created for the Member directory listing and the club directory listing.

The HTML & CSS were fun to create because I learned a few new tricks for cutting out the images out of the PSD file:

  1. If you select a wider area around an image, if there is nothing else other than that image in the selection Photoshop only selects the image. This helps with not having to exactly select the pixels you need, which makes things slightly faster
  2. If you copy a layer over to a new file, if the effects applied to the layer are not copied over, you can right click on the original layer and select “copy layer style” then paste it over into the layer in the new file.
  3. To select a layer exactly, you can first select the selection tool, then hold down ctrl and click on the image representing the layer in the layer browser on the right. Then you can easily cut it out to get the image to use in the CSS.

The Club directory listing is alphabetically ordered, and there are two methods used that make it easier to find what you are looking for:

  1. On the top of the list, there is a “table of contents” – a list of links to the first letter of the club name.
  2. Along the left side of the page, the first letter of the club name is shown in large letters above the first club with any given initial.

The Member directory listing uses a tabular layout, and the rows are alternating in color for making it easy to read a single row. The columns are separated with a border which makes it easy to read down a single column.

Designer:
Chris Savoie
Project URL:
http://www.pgaofmanitoba.com/home

Jaquilyn Shumate Photography

Jaquilyn Shumate Photography had their site designed by their close friend Evan MacDonald.

The site design is minimal and places focus on the photography which is beautifully done by Jaquilyn and Travis.

Designer:
Evan MacDonald
Project URL:
http://www.jaquilynshumate.com/

Mai Kosaka

The home page is an about me page with different sections triggered by hovering over the images
The home page is an about me page with different sections triggered by hovering over the images
The website features a portfolio section with a collage of the various portfolio images on the front page
The website features a portfolio section with a collage of the various portfolio images on the front page
The blog features beautiful images taken by Mai herself
The blog features beautiful images taken by Mai herself

Mai designed a personal site with a portfolio and blog section for herself. It was one of my first WordPress-based website builds.

One thing I got my first try against in this project is how to make that footer on the short home page stay on the bottom of the browser window.

Designer:
Mai Kosaka
Project URL:
Not online any more unfortunately! http://www.maiksdesign.com/
 

Site-branch-specific Styling with WordPress

For the second time now, I’ve been asked to style some elements in a page based on the branch of the sitemap tree being displayed.

You can see it at http://rupertsland.ca/wp/about/ still in staging, will move to http://rupertsland.ca/about/ vs. http://www.rupertsland.ca/wp/reference/ and http://www.seniorscircle.ca/directory/health-well-being/ vs. http://www.seniorscircle.ca/directory/home-and-housing/

Here’s an explanation:

Say we have a sitemap like this:

  • about
    • our company
    • our history
  • blog
    • news
    • snippets
    • portfolio

For example I need to style all the h1s in the blog branch to be blue, and all h1s in the about branch to be purple.

I’ve been putting “if (have_posts()) while(…): the_post();” of the loop before the get_header() call of a given template. I thought that $post is not available before the call to the_post(), but it turns out it is. Then after starting the loop, I would write a function to use as a filter for the body_class filter which would add a class to the body based on $post, and then I have a branch-specific CSS class to hook into it.

I’m probably going to stop moving the loop beginning before the get_header() call now that I know that the global $post is available before calling the_post(), and also I am just going to give a parameter to body_class() in header.php instead of hooking into the body_class filter.

Let me know if you have some ideas on how to do this better!