Shomeya

Two web artists. One amazing company.

Styling Bootstrap 3 Buttons in Drupal 7

from Sarah Prasuhn on June 2, 2015 03:20pm

Article_large_ferris_wheel

One of the greatest differences between Bootstrap 2 and Bootstrap 3 is the out of the box look and feel. Bootstrap 2 had a lot more pre-built colors and states, whereas Bootstrap 3 is a little more barebones.

So we're going to cover adding the class to integrate the basic default buttons, and then in Part 2 cover how to implement some more pre-built styles the colors, and sizing etc.

Like most frameworks you just add the class of course...but where?

For this example we'll be adding the code to the template.tpl.php.

  1. Figure out what class to use, for Bootstrap 3 it's btn

  2. Open the template.tpl.php file in your theme.

  3. Add this code to your template.tpl.php

Note: For Bootstrap we are using 'btn' if you are using another framework like Foundation, the classes will differ.

<?php

/**
* Adds the Bootstrap 3 `btn` class to all submit buttons.
*/

function qs_bootstrap_d7_preprocess_button(&$variables) {
  $variables['element']['#attributes']['class'] = array();
  $variables['element']['#attributes']['class'][] = 'btn';


  // Special styles for Delete/Destructive Buttons.
  if (stristr($variables['element']['#value'], 'Delete') !== FALSE) {
    $variables['element']['#attributes']['class'][] = 'btn-danger';
  }
}

/**
* Returns the HTML for a button.
*/

function qs_bootstrap_d7_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'disabled';
  }

  return '<input' . drupal_attributes($element['#attributes']) . ' /> ';
}

By attaching the 'btn' as a class to the button preproccesor, it should add a 'btn' class to any button in Drupal that is using that theme.

And that's it, this also adds the 'btn-danger' styles to the delete buttons. (Remember to change your Administration theme in the Appearance menu to utilize this on the content creation pages.)

Want more tidbits like this? Join the journey below!













Photo credit Siyan Ren on unsplash

blog comments powered by Disqus