Add CSS class to drupal form fieldset

Tested on:

  • Drupal 5.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.

  • 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.

# 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).

Advertisements

13 thoughts on “Add CSS class to drupal form fieldset

  1. Necati

    Thanks for this. I used this to generate fieldset class-names on the registration form where I had the OG-mandatory-group added.

    I was able to hide the fieldset with the mandatory group selection using CSS-only.

    Reply
  2. Anja

    Thanks from me too 🙂 I am using this for pretty much the same purpose as Necati, since you can’t use formfilter to hide og group fieldsets on node edit forms. well, you COULD use it, but upon editing the node the values get lost. so using css is the perfect alternative.

    Reply
    1. chirale Post author

      Path obliterated by new WP policies, I suppose. Here the transcription (note: this is a very old code, not tested on latest Drupal versions).

      function zen_fieldset($element) {
        if ($element['#collapsible']) {
          drupal_add_js('misc/collapse.js');
      
          if (!isset($element['#attributes']['class'])) {
            $element['#attributes']['class'] = '';
          }
      
          $element['#attributes']['class'] .= ' collapsible';
          if ($element['#collapsed']) {
           $element['#attributes']['class'] .= ' collapsed';
          }
        }
        # custom fieldset CSS class from element #title
        $css_class = "my-custom-class-";
        $css_class .= str_replace(" ","-",strtolower($element['#title']));
        # using transliteration module to convert 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);
        }
      
        $element['#attributes']['class'] .= (!empty($element['#attributes']['class']) ? " " : "") . $css_class;
      
        return '' . ($element['#title'] ? ''. $element['#title'] .'' : '') . ($element['#description'] ? '<div class="description">'. $element['#description'] .'</div>' : '') . $element['#children'] . $element['#value'] . "\n";
      }
      

      Thank you for visiting!

      Reply
      1. cambiaresto

        Thanks chirale!!!

        I’ve adapted to D6, and works perfectly.
        thank you very much for your attention

        (from Spain)

  3. cambiaresto

    Here is the code to add in template.php (D6 zen theme)

    function zen_fieldset($element) {
    if (!empty($element[‘#collapsible’])) {
    drupal_add_js(‘misc/collapse.js’);

    if (!isset($element[‘#attributes’][‘class’])) {
    $element[‘#attributes’][‘class’] = ”;
    }
    # custom fieldset CSS class from element #title
    $css_class = “custom-“;
    $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);
    }

    $element[‘#attributes’][‘class’] .= ‘ ‘.$css_class.’ collapsible’;
    if (!empty($element[‘#collapsed’])) {
    $element[‘#attributes’][‘class’] .= ‘ ‘.$css_class.’ collapsed’;
    }
    }

    return ” . ($element[‘#title’] ? ” . $element[‘#title’] . ” : ”) . ($element[‘#description’] ? ” . $element[‘#description’] . ” : ”) . $element[‘#children’] . $element[‘#value’] . “\n”;
    }

    Reply
  4. Francesco Carzedda

    I always get the white page as I try to override the function with my theme’s name in drupal 7.
    If I add an underscore before or after the function’s name the content reappears but, of course, the function is not themed.
    Thanks Chirale!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s