The Style Contest, Trail Mix, and Image Replacement


Published on April 20, 2006 at 7:11 PM EST
In the Tutorials category.

Featuring the Duct Tape Title Generator©. Enough said.

TrailMix-screenshot.gif

I’ve entered The Style Contest with a theme called Trail Mix. All of the graphics and hand-drawn elements make it a great theme, in my opinion, but what really makes it different is that it uses an image replacement technique for the weblog title.

First off, what is image replacement and what does it do? Image replacement is a way of using CSS to hide a text element and show a graphic in its place. Specfically in this case, I’m using image replacement to hide the weblog title text and replace it with the duct tape and handwriting graphic—just like the EDSMT logo in the top-right of this page.

It looks great, but has an obvious and significant flaw: anybody that wants to use Trail Mix for their web site’s theme will appear to have a site named “The Style Contest” because that’s what the image shows. I’ve come up with a few ways around this problem, however, in an attempt to make the theme more useful for others.

Use the Duct Tape Title Generator©

Simply supply your site name and pick a Sharpie pen color (after all, that’s what you write on duct tape with) and generate a new graphic.

Select a Sharpie pen color:

Your site title:

Text will be wrapped to two lines, if necessary. Right-click and save the resultant image. Be sure to name it title.gif and overwrite the existing title.gif in Trail Mix’s images/ directory.

If you’re happy with the results, fantastic! However, there are a few drawbacks to this tool: there’s no kerning control (space between letters), and no way to warp, angle, or otherwise personalize the title. Regardless, it still looks pretty good. The font being used is Dan Wolfgang’s Handwriting.

Create Your Own Title

title.gif

This is definitely the most versatile approach, but also requires the most work. You can make use of title.tif (in the Trail Mix distribution), which is a layered file that should make adding your own text easier. You’re welcome to use the Dan Wolfgang’s Handwriting font, create your own at Fontifier ($9), or use any other you like.

With the flexibility this option brings, be sure to consider the details that can make this more realistic and personal: kern, tilt, and warp the letters a little.

Be sure to save the file as a transparent GIF named title.gif and overwrite the existing one.

Typed Text on Duct Tape

Untitled-1.jpg

This is definitely the least exciting option, but it’s also very easy to use. As detailed in styles-site.css (in the Trail Mix distribution) remove the section doing the image replacement:

#banner h1#banner-header {
   position: absolute;
   top: 50px;
   left: 35px;
   height: 180px;
   width: 600px;
   overflow: hidden;
   background: transparent url(images/title.gif) top left no-repeat;
   }

#banner h1#banner-header a {
   display: block;
   padding: 182px 0 0 0;
   height: 0px !important;
   overflow: hidden;
   }

And uncomment the following CSS by removing the comments before and after (the /* and */.

#banner h1#banner-header {
   position: absolute;
   top: 50px;
   left: 35px;
   height: 180px;
   width: 600px;
   overflow: hidden;
   background: transparent url(images/title-blank.gif) top left no-repeat;
   }

#banner h1#banner-header a {
   display: block;
   padding: 20px;
   height: 180px;
   text-align: center;
   color: #1d25c1;
   font: 2em/2em "lucida sans unicode", "lucida grande", verdana, sans-serif;
   font-weight: bold;
   letter-spacing: -0.05em;
   overflow: hidden;
   }

Hopefully, one of these three solutions lets you easily use Trail Mix on your site—and I’d love to hear if you are!

This article is tagged as: CSS, Design, Duct Tape Title Generator, Images, Template, The Style Contest, Trail Mix, Tutorials