Quicktabs: output divs instead of list 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 &lt;ul&gt; 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' =&gt; array(
      'variables' =&gt; array ('parameter' =&gt; 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(&amp;$vars) {
  $variables = array(
    'attributes' =&gt; array(
      'class' =&gt; 'quicktabs-tabs quicktabs-style-' . $vars['tabset']['#options']['style'],
    ),
    'items' =&gt; 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?
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 &gt; 0)) {
   $('#quicktabs-my_tabs .quicktabs-tabs li.first').prepend("&lt;img src='sites/all/themes/mytheme/images/my_img1.jpg' alt='desc'&gt;");
   $('#quicktabs-my_tabs .quicktabs-tabs li.first').next().prepend("&lt;img src='sites/all/themes/mytheme/images/my_img2.jpg' alt='desc'&gt;");
   $('#quicktabs-my_tabs .quicktabs-tabs li.last').prepend("&lt;img src='sites/all/themes/mytheme/images/my_img3.jpg' alt='desc'&gt;");
   $('#quicktabs-my_tabs .quicktabs-tabs li a').append('&lt;span&gt;&lt;/span&gt;');
 }


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