Quicktabs Image in tab title

Question

I really need help with this.

I want to replace the link within the tab tile with an image. I can't find a solution for that. I saw some patches but I am not good at php and I did't got them right.

Can someone please tell me where I can find some tutorials about that?

Thanks.

---

I want to give some update regarding this. I tried different solutions and I need some advice.

Main goal is to add a different image to each tab. Empty tabs will be hidden.

Version 1. Field-Group module

I tried using that module and simple css with both class and id tab:

#vertical-tabs-list1 { background: url('images/harta3.png'); background-repeat: no-repeat; height: 64px; text-indent: -9999px; padding-top: 15px; }

.vertical-tab-button.vertical-tab-button2 { background: url('images/evenimente.png'); background-repeat: no-repeat; height: 64px; text-indent: -9999px; padding-top: 15px; }

This is working up to a point where is not working properly. If you hide empty tabs the following tab will take class and id of previous tab and that will mess up everything, because class and id are in li element and not in a href element like quicktabs.

Version 2. Quicktabs - Plausible solution

<ul class="quicktabs-tabs quicktabs-style-navlist"> <li class="active first"> <a href="/blabla/blablabla?qt-pagina_local=0#qt-pagina_local" id="quicktabs-tab-pagina_local-0" class="active quicktabs-loaded jquery-once-3-processed">Contact</a></li>

As you can see we have this id="quicktabs-tab-pagina_local-0" in

what I tried is simple css for each tab

#quicktabs-tab-pagina_local-0 { background: url('images/media.png'); background-repeat: no-repeat; width: 100px; height: 100px; font-size: 0px; }

This option seams to work, even if we have hidden empty tabs.

Now I want to ask:

1. Is version 2 reliable, or I will mess up things in other places?
2. Is it possible to add id same way to field group? How?

Thanks

Answer 1

Probably best to add your own Quicktabs style and use CSS background images.

In a custom module

function MYMODULE_quicktabs_tabstyles() {
  $tabstyles_directory = drupal_get_path('theme', 'MYTHEME') . '/quicktabs';
  $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;
}

CSS files in THEMEDIR/quicktabs/*.css will be read as a potential style

In your theme dir, add /quicktabs/image-tabs.css

Clear all caches

New style should be available, with accompanying CSS classes, add to your new CSS file.

Alternatively target the existing quicktabs classes with CSS.

Basic CSS background image tute here

Answer 2

I have used CSS rules: background-image: to pull an image in the background of the link (or the li) and color: transparent; to hide the text. According my test this works fine even on IE7.