theming Quick Tabs in Drupal

The Quick Tabs module allows you to create blocks of jQuery-powered tabbed content (like those found on Facebook) with ease, specifically views, blocks, and even Quick Tab blocks (within another Quick Tab block). The latest version of the module features AJAX integration, which allows you to choose whether all tabs should load on page load or load on tab click (which optimzes page loading times).

DEMO: See the Quick Tabs in action on the top of my frontpage.

This article documents my use of Quick Tabs, especially on how I used CSS to theme a custom tab style, and highlights a few other important considerations for web developers. For general installation and configuration documentation, visit the module's official project page.

ARTICLE OUTLINE:

• Creating custom tab styles with Quick Tabs 6.x-2.0-rc1
• Upgrading tab styles from 6.x-1.0-beta1 to 6.x-2.0-rc1
• Ensuring global theme compatibility with Quick Tabs
• Theming a Quick Tabs block within another Quick Tabs
• Using jQuery blocks and AJAX compatibility within Quick Tabs

Step-by-step walkthrough on creating a custom tab style with Quick Tabs 6.x-2.0-rc1

1. Create a new folder in ../quicktabs/tabstyles and give it your desired theme name.
2. Create a CSS file in this new folder (../quicktabs/tabstyles/CUSTOM_THEME/CUSTOM_THEME.css)
3. Copy and paste the CSS code from the Basic tab style (../quicktabs/tabstyles/basic/basic.css) into your new CUSTOM_THEME.css.
4. Modify accordingly to suit your needs.
5. Select your new tab style theme in your Quick Tab settings.

EXAMPLE: Here is the CSS I used for my "spiffyd" theme (../quicktabs/tabstyles/spiffyd/spiffyd.css):

.quicktabs_main{ clear:both; } .quicktabs_wrapper { background:url(../img/black_80p.png) repeat; } .quicktabs_wrapper .quicktabs_main{ padding:10px; } .quicktabs_wrapper ul.quicktabs_tabs { background:#000; position:relative; border-bottom:1px solid #999; padding:2px 0 2px 0; margin:0 !important; text-align:center; } .quicktabs_wrapper ul.quicktabs_tabs a { font-size:0.875em; font-weight:bold; text-transform:uppercase; color:#999; text-decoration:none !important; } .quicktabs_wrapper ul.quicktabs_tabs li { margin-left:.5em; } .quicktabs_wrapper ul.quicktabs_tabs li a { background:none; padding:6px 10px; height:100%; line-height:25px; } .quicktabs_wrapper ul.quicktabs_tabs li:hover a { color:#fff; } .quicktabs_wrapper ul.quicktabs_tabs li.active a { background:url(../img/black_80p.png) repeat; color:#eee; border:1px #999 solid; border-bottom:2px #151514 solid; } .quicktabs_wrapper ul.quicktabs_tabs li.active a:hover { background:url(../img/black_80p.png) repeat; }

Upgrading Quick Tabs 6.x-1.0-beta1 to 6.x-2.0-rc1:

The quicktabs class is no longer used as a container wrapper in 6.x-2.0-rc1. Instead quicktabs_wrapper class is used so you must change all quicktabs classes in your CUSTOM_THEME/CUSTOM_THEME.css to quicktabs_wrapper.

Ensuring global theme compatibility with Quick Tabs

I use a personally-customized Marinelli theme variant for this website. A few issues I've encountered while configuring Quick Tabs on this theme (but most likely not limited to this theme) are the following:

1. Unexpected margin and padding attributes.
2. Title region and background is still shown on the block even when block titles are disabled in Quick Tabs settings.

These issues may occur because Drupal sites are very dynamic and complex and there's a good chance some CSS code somewhere (either from the theme or third party modules) are attributing unwanted styles to your Quick Tabs. To resolve these issues, I had to simply add a bit of Quick Tab block-specific CSS in my global theme stylesheets to nullify margins and padding and hide the title region.

EXAMPLE: Here is a snippet of CSS I inserted in my theme's global stylesheet for a specific Quick Tab.

#block-quicktabs-1 { margin-top:0 !important; } #block-quicktabs-1 .blockcontent { padding:0 !important; margin-top:0; } #block-quicktabs-1 h2 { display:none; padding:0; margin:0; }

Theming a Quick Tabs block within another Quick Tabs

One of the many new features version 6.x-2.0-rc1 of Quick Tabs brings is the ability to place a Quick Tabs within another. Previous versions of the module only allow for views and blocks to be used.

DEMO: Click on the "MUSIC" tab on my frontpage Quick Tabs block.

To create a custom tab style for this "inner" Quick Tabs block, here's what I did:

1. Similar to how I created a new tab style as mentioned previously, I created a new tab style called "CUSTOM_THEME-SUB" in ../quicktabs/tabstyles/CUSTOM_THEME-SUB/CUSTOM_THEME-SUB.css).
2. Copied and paste the CSS code in CUSTOM_THEME.css to CUSTOM_THEME-SUB.css.
3. IMPORTANT: Replace the generic quicktabs_wrapper class with the theme-specific class quicktabs-style-CUSTOM_THEME-SUB to prevent CSS code conflict with other Quick Tabs themes and blocks.
   
4. Modify CSS accordingly to suit your needs.*
5. Select your new "inner" tab style theme for your "inner" Quick Tabs block in the settings.
6. NOTE: A HTML source viewer or Google Chrome's Inspect Element feature may make your life much easier.

* Often, the outer Quick Tabs block has a specified padding. As a result, the inner Quick Tabs block would be displayed within this padded area. To have the inner block "superimpose" upon the outer countainer (to effectively remove this padding), I had to set negative horizontal margins in the quicktabs_main class equal to the amount of padding specified in the outer container.

EXAMPLE: My ../quicktabs/tabstyles/spiffyd-sub/spiffyd-sub.css for my frontpage "Music" tab's Quick Tabs genre block.

.quicktabs_main { clear:both; } .quicktabs-style-spiffyd-sub { background:url(../img/black_80p.png) repeat; } .quicktabs-style-spiffyd-sub .quicktabs_main { padding:0; margin:0 -10px; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs { background:#000; position:relative; border-bottom:1px solid #999; padding:2px 0 2px 0; margin:0 -10px !important; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs a { font-size:0.875em; font-weight:bold; text-transform:uppercase; color:#999; text-decoration:none !important; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs li { margin-left:.5em; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs li a { background:none; padding:6px 10px; height:100%; line-height:25px; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs li:hover a { color:#fff; } .quicktabs-style-spiffyd-sub ul.quicktabs_tabs li.active a{ background:url(../img/black_80p.png) repeat; color:#eee; border:1px #999 solid; border-bottom:2px #151514 solid; }' .quicktabs-style-spiffyd-sub ul.quicktabs_tabs li.active a:hover{ background:url(../img/black_80p.png) repeat; }

Using jQuery blocks and AJAX compatibility within Quick Tabs

Another new feature in 6.x-2.0-rc1 is the integration of AJAX which allows the user to choose whether tabs should load all at once upon page load (no AJAX) or load only when the user clicks on each tab (AJAX enable).

While using AJAX boosts site loading times (it speeds up page loading because all tab contents no longer have to load at once), it may cause jQuery content to not load properly and thus not function on your site.

Though I am not a jQuery programming whiz, I suspect that the reason this happens is that the jQuery selectors in jQuery(document).ready(function($) { ... } do not get activated via AJAX when the AJAX tabs are opened, and as a result, the jQuery plugins within your Quick Tabs do not function.

This issue, however, should be resolved in the next Quick Tabs module update which allows for tab-specific AJAX toggling as opposed to the current all-tabs or none AJAX support. In other words, the option will allow the user to make specific tabs load on page-load so jQuery selectors are called properly. You may follow the development of this feature which I requested in the Drupal thread here.

• 
• prev post
• 
• next post