Tolkien Fonts - cufon text replacement example

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('h5');
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

I’d previously looked at Scalable Inman Flash Replacement (sIFR) but I have to say I think Cufón may have the edge if only for ease of set-up – although, granted a lot of the hard work has already been done by the plug-in. Oh, and Cufon doesn’t use Flash.

I don’t claim to understand exactly how Cufon works, but if you’re interested in that kind of thing have a look at http://wiki.github.com/sorccu/cufon/about which goes into all the nitty-gritty.

And here’s a link to the creator of the wp-cufon plugin, Tobias Battenberg

OK, Tolkien fans

So this next bit is only really of interest to fans of The Lord of the Rings… (look away now if hobbits and dragons aren’t your thing!). No really.

The site I’ve used Cufon on is a Tolkien book collecting site – and I created a special font that brings to mind the calligraphy of the author J.R.R.Tolkien – I was pretty pleased with the end result, so if anyone’s interested they can buy a copy of Tolkienesque Regular (in Truetype font format) from my store.

I also ended up tackling another Wordress theme design from scratch – so the entire site has a kind of ‘Tolkienesque’ feel to it. That’s the name I gave to the theme too.

Tolkien Wordpress theme

The Wordpress theme makes heavy use of categories to organise the 400-odd entries, and has a neat ‘Random Item’ widget that I made to pull a text link and the first thumbnail image from a random post. Anyway, I was quite pleased with the end result. It’s been a labour of love built in spare minutes snatched here and there over the last few months.

But I’m most pleased by the fact that I can now use any old font I like in Wordpress, subject of course to EULAs and other legal niceties, or at least until the legal quagmire surrounding @font-face, font embedding and linking gets sorted out.

I don’t know exactly (yet) how to make it into a downloadable widget that other people could use on their own sites, but if I get time I may investigate how to package it up. At the moment it’s just hard coded into a regular text widget. And it’s also hard coded to pick up the weather forecast for Carrick-on-Shannon, so I expect the appeal might be… er… limited.

The inspiration for this came from seeing articles like Using Weather Data to Change Your Website’s Appearance through PHP and CSS and of course, the BBC Weather site which displays different graphics depending on the weather forecast.

The main thing I wanted to learn about was just the basic process of getting and parsing a feed and using some of the data it contained to pop a weather symbol on my site – there were plenty of sites out there offering different solutions, but the php classes from Marco Voegeli were a great starting point.

I discovered quite a few useful things while trying to put this together. Probably the most important in the end was to check your hosting company’s firewall settings…

I’d had the basic code working fine for AGES and was testing happily using MAMP on my local Mac, but every time I tried to put it live on the server it killed the entire blog and all my existing widgets vanished from the admin page. That usually happened right before Wordpress froze up completely.

Anyway, the bottom line is I needed to contact my host (Supanames) to get them to allow me to contact the remote website to access the Weather feed. There’s a link in MyPanel called ‘Firewall Rules’ and a form to send a request to the engineers to enable connections to a particular URL. Which once again, all happened very promptly, so full marks again to Supanames support.

Also, if ever you lose all your widgets from your Wordpress Admin screen, I’d recommend disabling your plugins one by one until the list comes back, then remove (or edit) the offending widget, and then re-activate the plugins. I know that’s probably fairly obvious to most, and may not always solve the issue, but it’s still a good starting point.

Mike

UPDATE: March 2010
This widget had been running just fine for nearly a year, but today something went screwy and it killed the whole blog. I’ve removed it for now, pending further investigation. It’s a bit tricky because I can’t view the blog to see even what kind of error it’s causing…

The changes to the basic proportions of the page were made by increasing the #page and #footer divs from 760 to 900pixels and adjusting the right sidebar content to be 250px wide (to match my own ‘content_sub’ div) and expanding the rest of the content to fill the gap.

Next I changed the basic colour scheme – or as much as I could using color values in the style sheet (text etc). I searched all the template files to see exactly where the background images appeared and then added my own versions (at the new widths) including a body background, a footer image that closes off the main grey box backround, and a new ‘topper’ image that does the same at the top (this needed a new div – added to the header.php file).

I changed the header box to be left aligned and smaller and removed the top margin from <h1> tag (blog title).

Lastly, I put a new DIV into the header php code – this is where I place all my own header content.  I also moved the background image from the body (to stop it scrolling when the browser is resized) into my own header code.

The last few tweaks were mainly little cosmetic changes – a bit of margin/padding adjustment and a new background colour and border around the comment boxes. And that was pretty much it.

I made a few notes as I was tinkering with the CSS and PHP files – I will post at some point with a breakdown of what I did. But probably not today – it is the weekend after all.

I will also write a post soon on the excellent training day I had at the splendid Leitrim Enterprise Board presented by the equally excellent Johnny Beirne

But I think I’m needed right now for shopping duties…

I’m intending to blog about the changes I’m making as I go along. There are two possible outcomes here :

1. This may serve as a useful resource for anyone else attempting to customise their own blog.

or

2. This will be a catalogue of disasters, showing how to mess things up royally.

Obviously, I hope it’s not going to be (2) – but if by any chance you happen to be reading this and can spot disaster looming – please feel free to comment and point me back in the right direction!

As it stands, having spent about 2 minutes looking at the Design > Theme Editor tab I’m thinking this is the way to go. I’ll make a complete copy of the themes/default directory on my hard drive just in case I mess anything up. If I do, I should be able to selectively replace either the messed up style sheet, image, or (god forbid) php file.

By the way, I’ve recently been working on optimising my main website. Currently I’ve only replaced a couple of pages, but I have managed to create a pretty well-formed HTML template, and a style sheet that seems to render it identically on most browsers (according to the excellent Browsershots.org). So I’m hoping that with a bit of sly CSS cut’n'pasting, I should be able to impose my style on the default WordPress template – which also uses a basic two-column layout like my main site. Anyway, here goes. I think maybe the first thing to do is to change pixel dimensions only, and leave fonts, colors and images until later.

I’ve a good few years’ experience hand-coding HTML and CSS. I’ve got a pukka copy of the Adobe CS3 suite. I’ve got the O’Reilly book ‘Learning PHP & MySQL’ (I knew it might come in handy one day). I’ve got ‘The Convincer’ by Nick Lowe on repeat.

What could possibly go wrong?