4

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

4
  • Why do you need additional classes, can you not target using .parent .child element CSS selectors? Feb 4, 2013 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, 2013 at 10:39
  • Yes, but you can do things with CSS like .quicktabs ul .quicktabs ul{ background-color:red } /* target child container */ Feb 4, 2013 at 10:43
  • i tried...but the change is reflecting on all of them
    – why
    Feb 4, 2013 at 11:49

2 Answers 2

4

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 and acknowledge you have read our privacy policy.

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