Hi, I read different post, without success...

I'm trying to theme vertical tab buttons.
I would like to add an image preceding the button text.

In other places of the site, for field labels or taxonomy terms labels, I set a preprocess variable inside mytheme_preprocess_field and dumped it in mytheme_field or mytheme_field__taxonomy_term_reference.

But here I cannot find which function/file generates those buttons (in order to override it).

I tried inside mytheme_vertical_tabs but seems too late, here html is already generated.

I tried inside mymodule_field_group_build_pre_render_alter. but here i can modify only the content (right side) of the tab group, not the button.

Thanks in advance for any hint.

EDIT: I forgot to say I'm on add/edit content type page.

Comments

andreav’s picture

andreav CreditAttribution: andreav commented
Status: Active » Closed (works as designed)

Ok I got it!
Didn't know vtabs where created by javascript!

I report my solution hoping it will be useful for someone.

Slighlty modify js inside vertical-tabs.js (function Drupal.theme.prototype.verticalTab):

-  tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
+  tab.item = $('<li class="vertical-tab-button" id="vtab-button-' + settings['fieldset']['context']['id'] + '" tabindex="-1"></li>')

Now every "li" button has an id like this:

vtab-button-[vtab group item id]

Then I added a few css to set backgroud image and shift text to right:

#vtab-button-[an-id-here] {
  padding: 0 0 0 25px;
  background: url("images/my-bg-image-here.png") no-repeat left center;
}

Note, supposing my-bg-image-here.png is 25 px width.

Bye!

andreav’s picture

andreav CreditAttribution: andreav commented
Issue summary: View changes

on edit page