Replacing Drupal form submission inputs to allow Cufon styling
screen_shot_2012-06-04_at_7.18.23_pm.png
After quite some time of wondering whether there was a better font-replacement system than Cufon I today came across a Drupal theming trick which has reinforced by belief that a little bit of work can make Cufon transform all of the copy styling on a website.
Basically, the one thing which always bugged me about font-replacement techniques using Javascript like Cufon was that I couldn't style the text on <input> encased buttons - specifically Drupal's form submission buttons. Well, the work-around lies in adding the following code in your template.php file to let Drupal's theming layer change all of those buttons from <input> encasements to <button> encasements - a more maliable tag which can be overriden stylistically via Cufon; simply replace 'templatename' with whatever the name of your template is...
<?php
function templatename_button($element) {
// Make sure not to overwrite classes.
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
return '<button type="submit" '. (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'id="'. $element['#id'] .'" value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) .' >'. check_plain($element['#value']) .'</button>';
}
?>
This trick comes via tinker on Drupal.org and works with Drupal 6's theme layer.