SMOLNET PORTAL home about changes

Add CSS class to drupal form fieldset

Tested on:

  • Drupal x
  • Zen custom subtheme


Customizing Drupal form appearance may sound difficult. But to add a CSS class is (surprisingly!) simple using theme_fieldset themeable function.

theme_fieldset (http://api.drupal.org)


  • Copy theme_fieldset code from Drupal manual page
  • Paste to your template.php:

* If you’re using a Zen theme, change theme_fieldset to zen_fieldset. You can try to use this method with your theme prefix.
* If you’re using a theme based on phptemplate engine, you can change theme_fieldset to zen_fieldset to have the same effect of above (try one of this, not both).

  • Change the resultant code as you wish.


I’ve attached an example to generate CSS class from fieldset title: Add CSS class to drupal form fieldset.

Add CSS class to drupal form fieldset


\# custom fieldset CSS class from element \#title
$css_class = “my-custom-class-“;
$css_class .= str_replace(” “,”-“,strtolower($element\[‘#title’\]));
\# using transliteration module to transliterate/strip non-ASCII character where available
if(module_exists(‘transliteration’)){
\# including Transliteration functions
require_once(drupal_get_path(‘module’, ‘transliteration’) .’/transliteration.inc’);
$css_class = transliteration_clean_filename($css_class);
}


Adding this code to your template:

  • Take all Drupal generated fieldset title

* e.g. “Impostazioni del menù”

  • Transform it in a CSS class using Transliteration module

* e.g. “my-custom-class-impostazioni-del-menu”

  • Queue it with other CSS classes (where available)

* e.g “collapsible my-custom-class-impostazioni-del-menu”

I apply a previous substitution of whitespace using “-” (transliteration module use underscore “\_”) and you can do the same, but later remember to use transliteration_clean_filename to safely sanitize class name for any other case you’ve not contemplated (accents, special characters).

https://web.archive.org/web/20080317000000*/http://api.drupal.org/api/function/theme_fieldset/5 (https://web.archive.org)
https://web.archive.org/web/20080317000000*/http://api.drupal.org/api/function/theme_fieldset/5 (https://web.archive.org)
https://web.archive.org/web/20080317000000*/http://drupal.org/phptemplate (https://web.archive.org)
Response: 20 (Success), text/gemini
Original URLgemini://chirale.org/2008-03-17_50.gmi
Status Code20 (Success)
Content-Typetext/gemini; charset=utf-8