Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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:
After:
- See more at: http://nikiit.ru/node/461#sthash.1il8vuBh.dpuf
Comment | File | Size | Author |
---|
Comments
Comment #1
kopeboy CreditAttribution: kopeboy commentedThanks man! It worked.
If you want to use non-stacked pills (horizontal nav) just delete
nav-stacked
afternav-pills
and change both thecol-md-3
andcol-md-9
tocol-md-12
How to define new custom Quicktabs styles to use these!?
Comment #2
kopeboy CreditAttribution: kopeboy commentedActually 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..):
Comment #3
Nikit CreditAttribution: Nikit commentedhello Lorenzo! thanks for title fixing.
I assume, committers can put it in module, then we prepare git patch for it. At this moment, I haven't time, may be later...
Incorrect code, should be
==
or!=
Comment #4
potassiumchloride CreditAttribution: potassiumchloride commentedFor others who find this issue, you can Bootstrap Quicktabs module.
Comment #5
Nikit CreditAttribution: Nikit commentedClosed due to link