I love this module. Works very predictably. Thanks!

How can I modify my version so that it places the resulting tabs on the BOTTOM of a block, instead of at the top? Is this done through .css or some other method?

Comments

trailerparkopera’s picture

Status: Active » Closed (fixed)

Figured it out myself.

Used css. I have the quicktabs setup in a block that's 270px deep. Here's the css that put my tabs at the bottom:

.quicktabs {
height: 270px;
margin-top: -60px;
}
ul.quicktabs_tabs{
position: relative;
top: 230px;
left: 0px;
}
tugis’s picture

There's another method (better I think), to achieve this. Quicktabs is exposed as a theme element. So, in your theme, you can override the quicktabs rendering.

function yourtheme_quicktabs($quicktabs) {
  return yourtheme_quicktabs_render($quicktabs);
}

and then you should implement your version of "quicktabs_render":

function yourtheme_quicktabs_render($quicktabs) {
  // Allow other modules to alter the Quicktabs instance before it gets output.
  drupal_alter('quicktabs', $quicktabs);
  // convert views arguments to an array, retrieving %-style args from url
  $quicktabs['tabs'] = _quicktabs_prepare_views_args($quicktabs['tabs']);

  if ($quicktabs['hide_empty_tabs'] && !$quicktabs['ajax']) {
    // Remove empty tabpgages.
    foreach ($quicktabs['tabs'] as $key => $tab) {
      $contents = quicktabs_render_tabpage($tab, TRUE);
      if (empty($contents)) {
        $quicktabs['tabs'][$key] = NULL;
      }
      else {
        $quicktabs['tabs'][$key]['rendered'] = $contents;
      }
    }
  }

  $tabs_count = count($quicktabs['tabs']);
  if ($tabs_count <= 0) {
    return '';
  }

  if ($quicktabs['style'] == 'default') {
    $quicktabs['style'] = variable_get('quicktabs_tabstyle', 'nostyle');
  }

  quicktabs_add_css($quicktabs['style']);
  $javascript = drupal_add_js('misc/progress.js', 'core');
  if (!isset($javascript['setting'][1]['quicktabs']) || !array_key_exists('qt_'. $quicktabs['machine_name'], $javascript['setting'][1]['quicktabs'])) {
    // Only the tabs are used in quicktabs.js
    $settings = array(
      'tabs' => $quicktabs['ajax'] ? $quicktabs['tabs'] : quicktabs_array_fill_keys(array_keys(array_filter($quicktabs['tabs'])), 0),
    );
    drupal_add_js(array('quicktabs' => array('qt_'. $quicktabs['machine_name'] => $settings)), 'setting');
  }
  drupal_add_js(drupal_get_path('module', 'quicktabs') .'/js/quicktabs.js');

  $attributes = drupal_attributes(array(
    'id' => 'quicktabs-'. $quicktabs['machine_name'],
    'class' => 'quicktabs_wrapper quicktabs-style-'. drupal_strtolower($quicktabs['style']),
  ));
  $output = '<div'. $attributes .'>';
  $active_tab = _quicktabs_get_active_tab($quicktabs);

  // The main content area, each quicktab container needs a unique id.
  $attributes = drupal_attributes(array(
    'id' => 'quicktabs_container_'. $quicktabs['machine_name'],
    'class' => 'quicktabs_main quicktabs-style-'. drupal_strtolower($quicktabs['style']),
  ));
  $output .= '<div'. $attributes .'>';

  if ($quicktabs['ajax']) {
    // Prepare ajax views.
    _quicktabs_prepare_views($quicktabs['tabs']);
    // Render only the active tabpage.
    if (isset($active_tab)) {
      $attributes = drupal_attributes(array(
        'id' => 'quicktabs_tabpage_'. $quicktabs['machine_name'] .'_'. $active_tab,
        'class' => 'quicktabs_tabpage',
      ));
      $output .= '<div'. $attributes .'>'. quicktabs_render_tabpage($quicktabs['tabs'][$active_tab]) .'</div>';
    }
    // We need page preprocessing to populate Drupal.quicktabs.scripts when js aggregation is on.
    quicktabs_has_rendered_ajax_tab(TRUE);
  }
  else {
    // Render all tabpgages.
    foreach ($quicktabs['tabs'] as $key => $tab) {
      $attributes = drupal_attributes(array(
        'id' => 'quicktabs_tabpage_'. $quicktabs['machine_name'] .'_'. $key,
        'class' => 'quicktabs_tabpage'. ($active_tab == $key ? '' : ' quicktabs-hide'),
      ));
      $tab_content = isset($tab['rendered']) ? $tab['rendered'] : quicktabs_render_tabpage($tab);
      $output .= '<div'. $attributes .'>'. $tab_content .'</div>';
    }
  }

  $output .= '</div>';
  
  $output .= theme('quicktabs_tabs', $quicktabs, $active_tab);
  
  $outpu .= '</div>';

  return $output;
}

Clear the caches and that's it! Tabs are rendered in the bottom without CSS hacking.