Right off the bat I need to go on the record and say that this example is definitely not earth-shattering or all that useful beyond an introduction for people just wading into Javascript. At the very most it could be used as a simple hack for someone looking to edit a single file that contains the same content being used across their site or at least multiple pages. Let’s get started.

If you take a gander at this example, you’ll see that each page is pretty much the same: links, main content and a right-floated message box. Page one and three are exactly the same but page two has different copy in the message box.

The main copy is hard-coded into each HTML page but the special message box and its content is being pulled into each separate page from a single source located in the external Javascript file.

If you look in the HTML or do a view source you’ll just see the empty DIV tags:

‹div id="snippet1"›‹/div›

because for all intents and purposes it’s merely a placeholder or shell within structure of the HTML page, telling the Javascript where the content needs to go when its called.

Basically what we’re doing with the Javascript is an A/B thing. There are only two options or blocks of content available. Option A is the special or alternate message and will only appear on pages within the subdirectory defined in the Javascript on line #6:

if ( location.href.indexOf("/sub/") > -1) {

and for this example, the subdirectory is called, oddly enough, “sub”. Option B is the general message and will appear on all other pages on the site NOT within the defined subdirectory. Pretty much as easy as falling off a log.

This set-up can easily be copied and adapted or applied to an existing site with little or no pain and misery. I left some notes in the HTML and Javascript if anyone is interested. Here’s the zip of all the files.

See, I told you it wasn’t earth-shattering.

What Happened To Your Font Face?

If you haven’t checked out Cufon and how seamlessly it generates dynamically replaced text you should really take a few minutes and check it out.

The idea behind dynamically replaced text is to allow your website or blog to display a particular font type for actual inline text so that the copy meshes better with your overall design – which is pretty flippin’ sweet for web designers with OCD for junk like that.

Dynamic text replacement (DTR) has been around for a while now, but most of the initial solutions took a fair amount of work to muscle into place and the end results weren’t always what you might have hoped for. But Cufon makes implementation so easy it’s not even fair to the other methods. For real.

Hold On One Minute There Slick

But even with how slick Cufon works it’s important to keep some things in mind before you run off and dynamically replace the shit out of all the copy on your blog.

First and foremost, a huge reason why we haven’t been able to embed any font type we want on our sites is all due to licensing. It sounds crazy to some, but a lot of people spend their time creating type faces and put a great deal of work into them, so it’s more than fair to them that type faces are licensed and controlled. Be sure to check the licensing of the font you’re looking to use via DTR and make sure it’s cool.

Not all type faces should be used for large blocks of copy. Even though you might love a certain font and it matches your design perfectly, keep in mind that people will be reading (or trying to read) the copy on your site. If the font is to chunky, ornate or out of control, it might frustrate or downright piss people off and drive them away. So just like booze and comfort food, make sure to use moderation.

Personally I would limit DTR to headers and very small blocks of copy. It might be a mistake to apply the font to the entire site. Another thing: maybe your site is fine using a web-safe font. There’s nothing wrong with Arial or Times New Roman and it’s possible that your site may not need DTR. Just because the tool is available doesn’t mean you NEED to use it.

I recently launched a new blog dedicated to an issue that’s very important to me and in building out the template I was able to put the CSST Simple Orange template frame to use. After a little bit of adjusting with the styles, Ahimsa took on shape really quick and within a day I had a working WordPress design.

Hopefully others are able to make use of the WordPress Tinder. If by chance you use any of them, be sure to drop me a line and let me know how they’re working (or more importantly not working) for you.