topic Re: How to change tab background colour? in Vuforia Studio

How to change tab background colour?

rhudd — Fri, 21 Feb 2020 13:47:13 GMT

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.

Re: How to change tab background colour?

lgherman — Fri, 21 Feb 2020 15:03:16 GMT

Hello rhudd,

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

Kind regards,

Lorena

Re: How to change tab background colour?

rhudd — Fri, 21 Feb 2020 15:14:44 GMT

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

That's fixed it, thank you!

Re: How to change tab background colour?

lgherman — Fri, 21 Feb 2020 15:17:18 GMT

You are welcome!

Kind regards,

Lorena

Re: How to change tab background colour?

rhudd — Fri, 21 Feb 2020 16:04:56 GMT

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.

Re: How to change tab background colour?

lgherman — Mon, 24 Feb 2020 08:29:18 GMT

Hello rhudd,

You can try something like this:

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

Kind regards,

Lorena

Re: How to change tab background colour?

rhudd — Mon, 24 Feb 2020 11:12:23 GMT

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?

Re: How to change tab background colour?

lgherman — Mon, 24 Feb 2020 14:41:06 GMT

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

Re: How to change tab background colour?

rhudd — Mon, 24 Feb 2020 16:36:53 GMT

Hi Lorena,

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