Look and feel Drupal Form

Override elements and form themes in template.php

<?php

/**

 * Implementation of hook_theme().

 */

function modulename_theme() {

  $items = array();  

  $items['user_profile_form'] = $items['comment_form'] = array(

    'arguments' => array('form' => array()),    

    'template' => 'form-look-and-feel',    

    'preprocess functions' => array(

      'modulename_preprocess_form_buttons',      

    ),

  );  

  return $items;

}

 

function modulename_fieldset($element) {

  if(empty($element['#collapsible']) && ($element['#lookandfeel'] || $GLOBALS['lookandfeel'])) {

    $element['#attributes']['class'] .= ' fieldsetdiv';

    $element['#id'] = isset($element['#id']) ? $element['#id'] : strtolower(str_replace(' ', '-', $element['#title']));

    return '<div' . drupal_attributes($element['#attributes']) . ' id="'. $element['#id'] .'">' . ($element['#title'] ? '<h3 class="fieldsettitle">' . $element['#title'] . '</h3>' : '') . (isset($element['#description']) && $element['#description'] ? '<div class="description">' . $element['#description'] . '</div>' : '') . (!empty($element['#children']) ? $element['#children'] : '') . (isset($element['#value']) ? $element['#value'] : '') . "</div>\n";    

  }

  if (!empty($element['#collapsible'])) {

    drupal_add_js('misc/collapse.js');

 

    if (!isset($element['#attributes']['class'])) {

      $element['#attributes']['class'] = '';

    }

 

    $element['#attributes']['class'] .= ' collapsible';

    if (!empty($element['#collapsed'])) {

      $element['#attributes']['class'] .= ' collapsed';

    }

  }

 

  return '<fieldset' . drupal_attributes($element['#attributes']) . '>' . ($element['#title'] ? '<legend>' . $element['#title'] . '</legend>' : '') . (isset($element['#description']) && $element['#description'] ? '<div class="description">' . $element['#description'] . '</div>' : '') . (!empty($element['#children']) ? $element['#children'] : '') . (isset($element['#value']) ? $element['#value'] : '') . "</fieldset>\n";

}

 

function modulename_textarea($element) {

  if($element['#lookandfeel'] || $GLOBALS['lookandfeel']) {  

    $element['#resizable'] = false;

  }

  return theme_textarea($element);

}

 

function modulename_select($element) {

  $select = '';

  $size = $element['#size'] ? ' size="' . $element['#size'] . '"' : '';

  _form_set_class($element, array('form-select'));

  $multiple = $element['#multiple'];

  if($multiple) {

    $element['#attributes']['class'] .= ' form-multiselect';

  }

  return theme('form_element', $element, '<select name="' . $element['#name'] . '' . ($multiple ? '[]' : '') . '"' . ($multiple ? ' multiple="multiple" ' : '') . drupal_attributes($element['#attributes']) . ' id="' . $element['#id'] . '" ' . $size . '>' . form_select_options($element) . '</select>');

}

 

function modulename_checkbox($element) {

  _form_set_class($element, array('form-checkbox'));

  $checkbox = '<input ';

  $checkbox .= 'type="checkbox" ';

  $checkbox .= 'name="' . $element['#name'] . '" ';

  $checkbox .= 'id="' . $element['#id'] . '" ';

  $checkbox .= 'value="' . $element['#return_value'] . '" ';

  $checkbox .= $element['#value'] ? ' checked="checked" ' : ' ';

  $checkbox .= drupal_attributes($element['#attributes']) . ' />';

    

  if (!is_null($element['#title'])) {

    if($element['#lookandfeel'] || $GLOBALS['lookandfeel']) {    

      $checkbox = '<label class="option" for="' . $element['#id'] . '">' . $checkbox . '</label><label class="option">' . $element['#title'] . '</label>';

    }

    else {

      $checkbox = '<label class="option" for="' . $element['#id'] . '">' . $checkbox . ' ' . $element['#title'] . '</label>';

    }

  }

 

  unset($element['#title']);

  return theme('form_element', $element, $checkbox);

}

 

function modulename_form_element($element, $value) {    

  if($element['#lookandfeel'] || $GLOBALS['lookandfeel']) {    

    $t = get_t();

    if(!$element['#lookandfeel_inline']) {

      $moreclass = '';

      if(empty($element['#title'])) {

        $moreclass = ' notitle';

      }

      if($element['#attributes']['class']) {

        $moreclass .= ' ' . $element['#attributes']['class'];

      }      

      $output = '<div class="form-item form-item-'. $element['#type'] . $moreclass . '"';

      if (!empty($element['#id'])) {

        $output .= ' id="' . $element['#id'] . '-wrapper"';

      }    

      $output .= ">\n";

    }

    $required = !empty($element['#required']) ? '<span class="form-required" title="' . $t('This field is required.') . '">*</span>' : '';

 

    if (!empty($element['#title'])) {

      $title = $element['#title'];      

      if(strstr($element['#attributes']['class'], 'nofixtitle')) {

        $title .= ':';        

      }

      if (!empty($element['#id'])) {

        $output .= ' <label class="element" for="' . $element['#id'] . '">' . $t('!title', array('!title' => filter_xss_admin($title))) . "</label>\n";

      }

      else {

        $output .= ' <label class="element">' . $t('!title', array('!title' => filter_xss_admin($title))) . "</label>\n";

      }

    }

 

    $output .= " {$value}{$element['#suffix2']} {$required}\n";

    

    if(!$element['#lookandfeel_inline']) {

      $output .= "<div class='clear'></div>\n";

    }

 

    if (!empty($element['#description'])) {

      $output .= ' <div class="parentdescription description">' . $element['#description'] . "</div>\n";

    }

    if (!empty($element['#staticdescription'])) {

      $output .= ' <div class="staticdescription">' . $element['#staticdescription'] . "</div>\n";

    }

    

    if(!$element['#lookandfeel_inline']) {

      $output .= "</div>\n";

    }

 

    return $output;

  }

  $t = get_t();

 

  $output = '<div class="form-item"';

  if (!empty($element['#id'])) {

    $output .= ' id="' . $element['#id'] . '-wrapper"';

  }

  $output .= ">\n";

  $required = !empty($element['#required']) ? '<span class="form-required" title="' . $t('This field is required.') . '">*</span>' : '';

 

  if (!empty($element['#title'])) {

    $title = $element['#title'];

    if (!empty($element['#id'])) {

      $output .= ' <label for="' . $element['#id'] . '">' . $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) . "</label>\n";

    }

    else {

      $output .= ' <label>' . $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) . "</label>\n";

    }

  }

 

  $output .= " $value\n";

 

  if (!empty($element['#description'])) {

    $output .= ' <div class="description">' . $element['#description'] . "</div>\n";

  }

 

  $output .= "</div>\n";

 

  return $output;

}

 

/**

 * Preprocessor for handling form button for most forms.

 */

function modulename_preprocess_form_buttons(&$vars) {

  if (empty($vars['buttons']) || !element_children($vars['buttons'])) {

    if (isset($vars['form']['buttons']) && element_children($vars['form']['buttons'])) {

      $vars['buttons'] = $vars['form']['buttons'];

      unset($vars['form']['buttons']);

    }

    else {

      $vars['buttons'] = array();

      foreach (element_children($vars['form']) as $key) {

        if (isset($vars['form'][$key]['#type']) && in_array($vars['form'][$key]['#type'], array('submit', 'button'))) {

          $vars['buttons'][$key] = $vars['form'][$key];

          unset($vars['form'][$key]);

        }

      }

    }

  }

}

 

 

Form template form-look-and-feel.tpl.php

<?php

  $GLOBALS['lookandfeel'] = true;

  // ADD PLUGINS

  // select

  jquery_ui_add(array('ui.widget'));

  drupal_add_css(drupal_get_path('module','jquery_ui'). '/jquery.ui/themes/base/ui.all.css');

  drupal_add_js(path_to_theme() . '/js/ui.selectmenu.js');

  drupal_add_css(path_to_theme() . '/js/ui.selectmenu.css');

  drupal_add_js('

  $("document").ready(function() {

    $("div.form-look-and-feel select:not(.form-item-fivestar select)").selectmenu({style:"dropdown"});

  });

  ', 'inline');  

  

  // checkbox

  drupal_add_js(path_to_theme() . '/js/ui.checkbox.js');

  drupal_add_css(path_to_theme() . '/js/ui.checkbox.css');  

  drupal_add_js('

  $("document").ready(function() {

    $("div.form-look-and-feel input").filter(":checkbox,:radio").checkbox();

  });

  ', 'inline');  

  

  if(in_array($form['#id'], array('user-profile-form'))) {

    $GLOBALS['lookandfeel-inline'] = true;

    $moreformclass = ' form-look-and-feel-inline';

    $moreformclass .= ' form-look-and-feel-buttons-center';

  }

?>

<div class="form-look-and-feel<?php print $moreformclass; ?>">

  <?php       

  if(!@include($form['#id'] . '.tpl.php')) {      

    print drupal_render($form);

    print '<div class="buttons">' . drupal_render($buttons) . '</div>';

  }  

  ?>

</div>

<?php       

  unset($GLOBALS['lookandfeel'], $GLOBALS['lookandfeel-inline']);

?>

 

CSS + Images + JQuery UI 1.7 specific widgets + related modules will be attached in next update

Advertisements

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

%d bloggers like this: