Creating a Quicktabs style

I am currently using Quicktabs on a site and I needed to create a new style for my theme that was very close to the Sky theme but as usual, not exactly what I wanted and completely the wrong colour.

Thanks to Drupal being so awesome as well as the Quicktabs module being so well written and documented it wasn't long before I found what I was after... the author has kindly done a good thing and performed a message broadcast to all active modules to see if they too want to supply any themes that can be used...

Here's what I ended up with, this is working code and is an exact copy of the implementation of the Quicktabs code except the function name is different. Here's the code...

function MODULE_quicktabs_tabstyles() {
  $tabstyles_directory = drupal_get_path('module', 'MODULE') . '/tabstyles';
  $files = file_scan_directory($tabstyles_directory, '/\.css$/');
  $tabstyles = array();
  foreach ($files as $file) {
    // Skip RTL files.
    if (!strpos($file->name, '-rtl')) {
      $tabstyles[$file->uri] = drupal_ucfirst($file->name);
    }
  }
  return $tabstyles;
}

All you need to do then is to create a folder in your modules folder called 'tabstyles', here's what the structure ought to look like...

MODULE_ROOT
    +--- tabstyles
        +- foostyle
            +- foobar.css
            +- foobar-rtl.css
        +- barstyle
            +- bar-style.css
            +- bar-style-rtl.css

The name that you see in the Quicktabs list and Styles page is the same as the CSS file (the RTL variant is hidden) with the first character converted to upper case. In our example you would be able to select "Foobar" or "Bar-style" as a Quicktab style.

That's it. Simple, effective and yet again a glowing credit to the awesome architecture that is Drupal!

Content Tags: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <pre> <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or class="OPTIONS" [title="the title"].
  • Lines and paragraphs break automatically.

Full HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or class="OPTIONS" [title="the title"].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.