chirale

IT and beyond

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

13 thoughts on “Add CSS class to drupal form fieldset

  1. Necati says:

    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.

  2. Anja says:

    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.

  3. sepp says:

    thx works perfect !!! Dont forget to dlete the cache ….

    Sepp

  4. Heather says:

    This was so handy! Thank you.

    I had to modify it for 6, easy enough.

  5. Kaido says:

    Still works fine 2010 😀 Thanks..

  6. cambiaresto says:

    The link:
    https://chirale.files.wordpress.com/2008/03/fieldset_title_samp2.txt
    don’t work
    Can you reupload?

    Thanks!!!

    1. chirale says:

      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!

      1. cambiaresto says:

        Thanks chirale!!!

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

        (from Spain)

  7. chirale says:

    Please feel free to add D6 code here if you want: just add your code in a comment for future reference (or just add a backlink to your article, if you write any).

    Thank you for visiting!

  8. cambiaresto says:

    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”;
    }

    1. chirale says:

      Nice work. If you want to keep indentation and color you can check this link and wrap the code above with these special sourcecode tags provided by WordPress (I’ve just discovered they support it). 😉

      Happy coding.

      1. cambiaresto says:

        The work is yours
        Thanks again!!!

  9. 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!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: