0

I want to add a class to a button in my login form. I have searched through all the template files and I cannot find where to do this. I found the following code that best matches the form in modules/user/user.module

function user_login_block($form) {
$form['#action'] = url(current_path(), array('query' => drupal_get_destination(), 'external' => FALSE));
$form['#id'] = 'user-login-form';
$form['#validate'] = user_login_default_validators();
$form['#submit'][] = 'user_login_submit';

The HTML for the button is below. My aim is to change btn-default to btn-primary

<button class="btn btn-default form-submit" id="edit-submit" name="op" value="Log in" type="submit">Log in</button>

Please help!

  • I managed to get to work by adding $form['actions']['submit']['#attributes']['class'][] = 'btn-primary'; to function user_login_block($form) {... in modules/user/user.module. As I understand it changes like this should be done in the subtheme folder but when I add it there it displays an error about unable to redeclare a function – Clinton Green Jan 6 '15 at 22:06
  • If you encounter the above error, make sure your Sub theme name is declared correctly in your subthemes .info file – Clinton Green Jan 7 '15 at 23:34
0

You should refrain from hacking core.

Rather add this code to your sub theme's template.php file:

function MYTHEME_button(&$variables) {
  dpm($variables);
  $element = $variables['element'];
  $label = $element['#value'];
  element_set_attributes($element, array('id', 'name', 'value', 'type'));

  // If a button type class isn't present then add in default.
  $button_classes = array(
    'btn-default',
    'btn-primary',
    'btn-success',
    'btn-info',
    'btn-warning',
    'btn-danger',
    'btn-link',
  );
  $class_intersection = array_intersect($button_classes, $element['#attributes']['class']);
  if ($variables['element']['#type'] == 'submit' && $variables['element']['#value'] == 'Log in') {
    $element['#attributes']['class'][] = 'btn-primary';
  }
  else if (empty($class_intersection)) {
    $element['#attributes']['class'][] = 'btn-default';
  }

  // Add in the button type class.
  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];

  // This line break adds inherent margin between multiple buttons.
  // dpm($variables);
  return '<button' . drupal_attributes($element['#attributes']) . '>' . $label . "</button>\n";
}

Bootstrap theme overrides the theme_button, and this is where I copied this code (minus the alteration of adding the class). We then override Bootstrap's implementation with our own.

The code that adds the class is this part:

if ($variables['element']['#type'] == 'submit' && $variables['element']['#value'] == 'Log in') {
    $element['#attributes']['class'][] = 'btn-primary';
}

It's perhaps no the best way to detect that specific button (going on type and text), but it works.

  • Thank you, that's exactly what I was after. I really didn't want to hack the core. Cheers – Clinton Green Jan 7 '15 at 22:55
0

Checkout hook_form_alter. You can add and change (I would suggest only adding unless you are sure it will only affect the forms you want it to) classes with #attributes

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.