How to change tab background colour?

[rhudd]

How can I change the background colour of a tab header? (Tab 1, Tab 2, Tab 3 in the image)

'color' has no effect and 'background-color' changes the background of the Tab contents below, not the Tab header.

[lgherman · Accepted solution]

Hello rhudd,

Try setting the Tab Strip Class instead of the Class field.

Kind regards,

Lorena

[rhudd]

😐...sometimes I'm not a smart man 😂 

That's fixed it, thank you!

[lgherman]

You are welcome!

Kind regards,

Lorena

[rhudd]

Hi @lgherman,

I might have spoken too soon. It has applied the style in the canvas view, but when I click on 'Preview' the styling disappears. I also tried loading it on my iPad and it doesn't display.

[lgherman]

Hello rhudd,

You can try something like this:

.test-bar {
  background: #5bb73b !important;
}

Kind regards,

Lorena 

[rhudd]

Hi Lorena,

Thank you, the strip colour now appears correctly in the preview window:

However, when I do this the tabs no long have the two-tone pressed/not pressed effect which they have by default or when using one of the built-in themes, for example 'button-balanced':

Is it possible to specify a custom colour and keep the two tone effect? 

[lgherman]

Hello rhudd,

In order to keep this effect, you will have to override Vuforia Studio's default style and change the background color of the selected tab to the color that you want. It should look something like this:

/* This sets the background color of the selected tab */
.bar-light .button.active, .bar-light .button.activated{
    background-color: #007a3e !important;
}

Kind regards,

Lorena

[rhudd]

Hi Lorena,

Thank you, that's exactly what I'm looking for! 😁