Quicktabs Bootstrap styles: vertical navigation [#2443993]

Introduction

Next code allow Quicktabs vertical tab style "NavList" looks like Bootstrap Vertical Navigation with minimum of CSS overriding.

Add next code to your template.php file of theme

/**
 * Bootstrap theme for Quicktabs NavList style tabset.
 */
function YOURTHEME_qt_quicktabs_tabset(&$vars) {
  // Return default for non navlist style.
  if ($vars['tabset']['#options']['style'] != 'navlist') {
    return theme_qt_quicktabs_tabset($vars);
  }

  $variables = array(
    'attributes' => array(
      'class' => 'quicktabs-tabs nav nav-pills nav-stacked col-md-3',
    ),
    'items' => array(),
  );
  foreach (element_children($vars['tabset']['tablinks']) as $key) {
    $item = array();
    if (is_array($vars['tabset']['tablinks'][$key])) {
      $tab = $vars['tabset']['tablinks'][$key];

      $item['class'] = array('tab-pane');
      if ($key == $vars['tabset']['#options']['active']) {
        $item['class'][] = 'active';
      }
      $item['data'] = drupal_render($tab);
      $variables['items'][] = $item;
    }
  }
  return theme('item_list', $variables);
}

/**
 * Bootstrap theme for Quicktabs NavList style tabs.
 */
function YOURTHEME_qt_quicktabs(&$vars) {
  // Return default for non navlist style.
  if ($vars['element']['tabs']['#options']['style'] != 'navlist') {
    return theme_qt_quicktabs($vars);
  }

  $element = $vars['element'];

  // Next is hard-coded, so only str_replace:
  $element['container']['#prefix'] = str_replace('quicktabs-style-navlist', 'tab-content col-md-9', $element['container']['#prefix']);

  $output = '<div '. drupal_attributes($element['#options']['attributes']) .'>';
  $output .= drupal_render($element['tabs']);
 
  $output .= drupal_render($element['container']);

  $output .= '</div>';
  return $output;
}

Change YOURTHEME to your theme name.

Add to your CSS file

.quicktabs-style-navlist ul.quicktabs-tabs li {
display: inherit;
background: inherit;
list-style-type: inherit;
padding: inherit;
white-space: inherit;
}

This will reset some style of NavList.

Compare

Before:
Before
After:
After

- See more at: http://nikiit.ru/node/461#sthash.1il8vuBh.dpuf

Comment	File	Size	Author
	2015-02-28_2148.png	30.47 KB	Nikit
	2015-02-28_1751.png	24.92 KB	Nikit

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

kopeboy CreditAttribution: kopeboy commented 19 May 2015 at 19:11

Title:

Quicktabs vertical bootstrapping

» Quicktabs Bootstrap styles: vertical navigation

Thanks man! It worked.

If you want to use non-stacked pills (horizontal nav) just delete nav-stacked after nav-pills and change both the col-md-3 and col-md-9 to col-md-12

How to define new custom Quicktabs styles to use these!?

Comment #2

kopeboy CreditAttribution: kopeboy commented 19 May 2015 at 22:38

Actually I found some problem.
I tried to put 2 variations, one for "navlist" and one for the "nostyle", but I couldn't get it to work because the $vars['element']['tabs']['#options']['style'] = 'navlist' is always true.

I tried to output the variables with devel and now even when I see page with a Quicktab with style = "nostyle", the ['tabs']['#options']['style'] is still "navlist", thus rendering the unwanted navlist style in place of the nostyle.

Here is my code (do you see any error? - not a coder yet..):

/**
 * Bootstrap theme for Quicktabs Navlist or DEFAULT style tabs.
 */
function MYTHEME_qt_quicktabs(&$vars) {
  if ($vars['element']['tabs']['#options']['style'] = 'navlist') {
    $element = $vars['element'];

    // Next is hard-coded, so only str_replace:
    $element['container']['#prefix'] = str_replace('quicktabs-style-navlist', 'tab-content col-md-9', $element['container']['#prefix']);

    $output = '<div '. drupal_attributes($element['#options']['attributes']) .'>';
    $output .= drupal_render($element['tabs']);
   
    $output .= drupal_render($element['container']);

    $output .= '</div>';
    return $output;
  }
  elseif ($vars['element']['tabs']['#options']['style'] = 'nostyle') {
    $element = $vars['element'];

    // Next is hard-coded, so only str_replace:
    $element['container']['#prefix'] = str_replace('quicktabs-style-nostyle', 'tab-content col-md-12', $element['container']['#prefix']);

    $output = '<div '. drupal_attributes($element['#options']['attributes']) .'>';
    $output .= drupal_render($element['tabs']);
   
    $output .= drupal_render($element['container']);

    $output .= '</div>';
    return $output;
  }
  else {
    return theme_qt_quicktabs($vars);    
  }
}