change style of a specific caption

I need to change the style of a specific caption, not for all captions (that’s easy). I don’t see any way to achieve this. There seems to be no possibility to assign an id to the caption or to access the caption style in another way?
I use the touchkit extension.
I need it for the caption of a Switch element. There is no surrounding div for this element, that capsules caption and switch element. If I assign an id to the switch, the id is in the Switch-Div, this way the label remains unaccessible via css.
Any Ideas?


if you call addStyleName(“foo”) on your Switch, the caption should get a class name ‘v-caption-foo’, which you can then target from CSS.


if I add addStyleName(“foo”) to the Switch the caption does NOT have “v-caption-foo” as classname. Below is the generated HTML-source-code:

<div class="v-touchkit-componentgroup-row v-touchkit-componentgroup-row-cap">
   <div class="v-caption">E-Mails</div> <!-- I need the foo class here -->
   <div class="v-touchkit-componentgroup-cell"> 
      <div class="v-checkbox v-widget rightFloatSwitchText v-touchkit-switch-wrapper-rightFloatSwitchText foo v-touchkit-switch-wrapper-foo" tabindex="0" id="testEmailID"> <!-- but addStyleName("foo") is only here -->
         <div class="v-touchkit-switch" style="background-position-x: -56px;">
            <div class="v-touchkit-switch-slider"></div>

Most if not all the standard layouts copy the component style name also to the caption, but TouchKit ComponentGroup doesn’t seem to do so.

file a ticket
about this. Note that most of the people who have worked on TouchKit are on summer vacation at the moment, so it might take a while for minor issues to be addressed.

If you are not afraid to hack the client side, I believe the classes to touch are VerticalComponentGroupWidget and VerticalComponentGroupConnector.

Thanks. I’ve added a ticket.
Also I found out a simple solution: I just add html directly to the caption, so the caption looks like this:
“<div class="myclass"> caption ”