0

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?

2
  • 2
    Why not just give the quicktabs a layout i.e. display: block and simply theme them as if they were divs. I think it would also help to know what exactly you are trying to do. It may also be possible to do this with a few lines of JQuery if you truly want to convert them. Feb 7, 2012 at 17:19
  • The layout I was trying to implement included clickable images as part of the markup. I have looked more into solving the issue with jQuery and css only - definitely the way to go. I have added the jQuery code below. Feb 9, 2012 at 7:44

1 Answer 1

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

2
  • If all you are trying to do is add images for tabs, Quicktabs already has themes / settings / provisions for that. Did you have a look at how that's done natively in Quicktabs? Typically what I do is choose "no Style" on the configuration page and then grab some existing code from the module's CSS and add it to my own theme. Quciktabs for Drupal 7 can even use JQuery UI I think. Feb 9, 2012 at 16:37
  • Yes, I tried to make my own Quicktab style, but I couldn't accomplish the layout I wanted that way - that might be my lack of skills, I don't know. Thanks for your advice anyways. Feb 10, 2012 at 23:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.