Mar
1
My interview with Grab a Perch is now on their blog, where I talk about using perch in my web design for Technology Applied.

My interview with Grab a Perch is now on their blog, where I talk about using perch in my web design for Technology Applied.

Dec
1
New web site launched for client Rivaj Boutique

New web site launched for client Rivaj Boutique

Sep
14
My First Tumblr Theme (Pencils)

This was my first attempt at a tumblr theme it is similar to the theme I am using here but I am not allowed to add the comments, and lightbox etc as they are external plugins /systems. The theme is not perfect yet but It might make a suitable starting point if you like my site, and you can read some of my other posts that will help you to implement lightbox into the tumblr theme yourself.

Jul
13

Titles on lightbox slides in tumblr

I have now added titles to the slides in the lightbox effect used on this site. Thanks to Brant for asking me about it on a comment he made on one of my previous posts about using lightbox in tumblr, as it was something I had not considered previously, and I love a challenge.

It turned out to be pretty easy once I referred back to the lightbox2 and tumblr theme documentation. You just have to add title="{PhotoAlt}" where the {PhotoAlt} tumblr tag is derived from the caption for a photo type post.

So the new code looks like this:

<a href="{PhotoURL-HighRes}" rel="lightbox[photo_post]" title="{PhotoAlt}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}

The slides will now show a title at the bottom of them similar to this:

title on lightbox slide
Jun
12

Scripts and css files for Lightbox in tumblr themes

As I have had a lot of interest in my previous posts about adding the light box effect to a tumblr theme using LightBox2 I thought it might be worth pointing out that the Javascript and CSS files that are needed to make this run can be hosted on tumblr using their static file uploader if you do not have access to some alternate web hosting space and the ability to FTP the files to this location.

May
28

Lightbox now does slide shows in tumblr theme

Having previously added the lightbox 2 effect to my tumblr them to display individual photo post images. I wondered about adding the slide show functionality so that all the photo post images on a tumblr page could be displayed. reading through the instructions for lightbox2  it turned out that it is really simple to achieve by adding a group name to the images. The way the tumblr system loops round means that by adding the group name to the theme html once, all photos on the generated page will have the same group name. The group name is added along with the lightbox trigger like this rel=”lightbox[group_name]”


Code From Before:

<a href=”{PhotoURL-HighRes}” rel=”lightbox”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

New Code With Slide Navigation:

<a href=”{PhotoURL-HighRes}” rel=”lightbox[photo_post]”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

May
20

Konami Code Here

I heard from the site point podcast about a fun feature appearing in some websites called Konami Code some of the sites that include this can be found at konamisites.com you will need the code to get in of course.

Intrigued by this idea I decided to see if I could add konami code to this site and with a Google search I found this example which I have added to this site, so give it a go.

May
15

Tumblr Site Additions

Here is a list of the additions that I have integrated into this Tumblr powered site.

  • Light Box effect on photo posts using lightbox2 already discussed here.
  • Comments system from disqus excellent instructions on their site.
  • Social networking share and bookmark tools from ShareThis.
  • Creation of day pages for the Tumblr theme, linked from the little calendar dates.
  • Addition of tags to the posts again using the Tumblr theme manual.
  • Creation of a tag cloud using tumblr tag clouds v2 with custom css.
May
12
Lightbox 2 In Tumblr Themes

This is a really great script for adding a light box effect to your Tumblr powered site as I have done with the photo posts on this site. Create the link to the high res image manually inserting the new {PhotoURL-HighRes} theme tag instead of the {LinkOpenTag} then you can insert the rel=”lightbox” attribute to the anchor.

Example:

<a href=”{PhotoURL-HighRes}” rel=”lightbox”><img src=”{PhotoURL-500}” alt=”{PhotoAlt}”/>{LinkCloseTag}

Lightbox Update

Since I wrote this post I have made several improvements to my lightbox setup, details of which can be found in my other posts tagged with lightbox.

May
6
Pencils Theme Test Tumblelog

This site demonstrates my first attempt at a Tumblr theme. I created it for this site from a theme I had created sometime ago for WordPress Because I wanted to customise the theme further for use on this site, by adding additional navigation to external pages on a subdomain etc. I decided to give the theme in it unmodified state its very own Tumblelog.

This is the Vector Designer image I created for use as the CSS background for the date in my Tumblr theme Pencils, and on this site.

This is the Vector Designer image I created for use as the CSS background for the date in my Tumblr theme Pencils, and on this site.

Apr
29
Recycle Flash

Here is a simple Flash game I created about sorting recycling. Most of the images were created using Vector Designer.

Apr
25
A Great New Viral Word

This is a link to another website I have created using WordPress and my very own custom theme. I made the word up too, please spread it.

Apr
24
Gradient Image Maker

This is a handy online tool to make gradient images, they are ideal for using as CSS background images. With this tool and Tumblr’s ability to host these images for you if you design your own Tumblr theme. By doing this you can design a unique Tumblr site with no desktop applications apart from a web browser of course.