Quicktabs: output divs instead of list

Question

I am quite new to theming, and I am trying to figure out the right way of theming Quicktabs in D7. I would like to output the tabs as divs instead of as a <ul> list. Looking at info from Theme Developer tells me that the Quicktabs are defined by qt_quicktabs_tabset which in turn calls theme_item_list() .

I could override theme_item_list() in my template.php file, but it would require a lot of tweaking because the theme_item_list() is designed for outputting a list. So for the moment my approach is to make a new theme function available in a custom module like this

function mymodule_theme() {
  return array(
    'mymodule_hook' => array(
      'variables' => array ('parameter' => NULL),
    ),
  );
}

function theme_mymodule_hook($variables){
  //here I can output my tabs as divs
}

and calling this in this way in template.php:

/**
 * Theme function to output tablinks for classic Quicktabs style tabs.
 *
 * @ingroup themeable
 */
function mytheme_qt_quicktabs_tabset(&$vars) {
  $variables = array(
    'attributes' => array(
      'class' => 'quicktabs-tabs quicktabs-style-' . $vars['tabset']['#options']['style'],
    ),
    'items' => array(),
  );
  foreach (element_children($vars['tabset']['tablinks']) as $key) {
    $item = array();
    if (is_array($vars['tabset']['tablinks'][$key])) {
      $tab = $vars['tabset']['tablinks'][$key];
      if ($key == $vars['tabset']['#options']['active']) {
        $item['class'] = array('active');
      }
      $item['data'] = drupal_render($tab);
      $variables['items'][] = $item;
    }
  }
  //normally theme_item_list() is called: return theme('item_list', $variables);
  return theme('mymoduletabs_hook', $variables);
}

function mytheme_mymoduletabs_hook($variables){
  //here I can finally output my tabs in divs
}

It's the first time I try this approach and would appreciate feedback. The intricacy of my solution worries me a bit - am I on the right path here?

Answer 1

jQuery seems to be the way to go if you want to manipulate the markup output by Quicktabs.

 /*we only want to append the data once hence the condition */
 if (!($('#quicktabs-my_tabs .quicktabs-tabs li img').length > 0)) {
   $('#quicktabs-my_tabs .quicktabs-tabs li.first').prepend("<img src='sites/all/themes/mytheme/images/my_img1.jpg' alt='desc'>");
   $('#quicktabs-my_tabs .quicktabs-tabs li.first').next().prepend("<img src='sites/all/themes/mytheme/images/my_img2.jpg' alt='desc'>");
   $('#quicktabs-my_tabs .quicktabs-tabs li.last').prepend("<img src='sites/all/themes/mytheme/images/my_img3.jpg' alt='desc'>");
   $('#quicktabs-my_tabs .quicktabs-tabs li a').append('<span></span>');
 }

Note that this example works for 3 tabs - it should be modified for your setup.

In order to make the whole quicktab a clickable link, add appropriate css to the span inside the a element, as described in this post: Make a div into a link