2

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

  • Hello and Welcome Drupal StackExchange, Ivan. Consider explaining a little more about your Drupal version, which tabs you want to override exactly and what have you tried and I'm sure someone will be able to help you to hunt this. – AyeshK Jan 21 '13 at 22:54
4

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

0

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.

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.