4

How can I add custom css classes to quick tabs and nested tabs within quick tabs?

  • Why do you need additional classes, can you not target using .parent .child element CSS selectors? – David Thomas Feb 4 '13 at 10:32
  • I am using an instance of Quick Tabs within Quick Tabs so both the parent and the child are given the same class by Drupal. – why Feb 4 '13 at 10:39
  • Yes, but you can do things with CSS like .quicktabs ul .quicktabs ul{ background-color:red } /* target child container */ – David Thomas Feb 4 '13 at 10:43
  • i tried...but the change is reflecting on all of them – why Feb 4 '13 at 11:49
3

Have you read this issue. Try to apply the patch by using git apply command line :

$ git apply --directory=path/to/module-dir/ add-custom-class-656330-6.patch

If you don't use git, add this line in the theme_qt_quicktabs_tabset function near the line 589 on the quicktabs.module file and the function will become :

<?php
function theme_qt_quicktabs_tabset($vars) {
   if ($key == $vars['tabset']['#options']['active']) {
     $item['class'] = array('active');
   }
   $item['class'][] = drupal_html_class($tab['#title']);# new line added by the patch
   $item['data'] = drupal_render($tab);
   $variables['items'][] = $item;
 }
?>

of course WITHOUT the <?php ?> tags

After that you have the title in class attributes :

Example :

  • tab title => given tab title
  • automatic tab class => given_tab_title

Wish helps :)

0

Another option is the Block Class module. After enabling, you can add a class when configuring the block for the quicktabs instance, as well as any blocks included in your quicktabs instance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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