2

I want to use as much as I can from http://twitter.github.com/bootstrap/base-css.html#forms for my theme, and as part of this I really want to get rid of the <div class="form-item"> that is being wrapped around each <input> element.

As far as I can tell the only way to do this is by copying the entire http://api.drupal.org/api/drupal/includes!form.inc/function/theme_form_element/7 theme_form_element() function and remove the code that produces the <div> wrapper.

Is this really the only way?

2

Yes. These classes are hardcoded into Drupal and are not only used for visible styling but also for the jQuery code that "animates" the forms (validation, autofill, auto focus, etc.)

HTML elements can have multiple classes. You could just add the classes to the Drupal form and then create your own theme. By creating your own theme you could not theme the default Drupal classes and instead just theme the classes from Base CSS.

  • But I don't want to CSS my way out of this, my goal is to use as much as I can from twitter's bootstrap as it is. – kristian nissen Mar 6 '12 at 8:18
  • You wouldn't be? Start with a base Drupal theme that has minimal CSS (ie no CSS for form elements) and add the Twitter Base CSS. Your form elements will then be themed according to the Twitter bootstrap. – Kevin Morse Mar 6 '12 at 8:39
1

I found that just adding:

'#theme_wrappers' => array(),

to the form item removed the DIVs.

0
  1. Implement hook_theme

/**
 * Implements hook_theme().
 */
 function mytheme_theme($existing, $type, $theme, $path)
 {
     return array(
         'mywrapper' => array(
             'render element'  => 'element',
         ),
     );
 }

  1. Alter the form using hook (or wherever you're accessing the form)

 /**
  * Implements hook_form_FORMID_alter().
  */
 function mytheme_form_formid_alter(&$form, &$form_state)
 {
      // You could wrap the element using this 
      $form['quantity']['#prefix'] = 'div class="custom_class_outer">';
      $form['quantity']['#suffix'] = '/div>';

      // And clear the other wrappers
      $form['quantity']['#theme_wrappers'] = array();

      // Or we could use wrapper
      $form['quantity']['#theme_wrappers'] = array('mywrapper');
 }

  1. Implement wrapping function

 /**
  * Theme wrapper
  */
 function mytheme_mywrapper(&$vars)
 {
     return 'div class="custom_class_inner">' .
           $vars['element']['#children'] . '/div>';
 }

  1. drush cc all

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.