cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to change tab background colour?

SOLVED
Contributor

How to change tab background colour?

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.

 

img1.png

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: How to change tab background colour?

Hello rhudd,

 

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

tabheader.PNG

Kind regards,

Lorena

View solution in original post

8 REPLIES 8
Highlighted

Re: How to change tab background colour?

Hello rhudd,

 

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

tabheader.PNG

Kind regards,

Lorena

View solution in original post

Highlighted

Re: How to change tab background colour?

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

 

That's fixed it, thank you!

Highlighted

Re: How to change tab background colour?

You are welcome!

 

Kind regards,

Lorena

Highlighted

Re: How to change tab background colour?

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.

 

img2.png

img3.png

Highlighted

Re: How to change tab background colour?

Hello rhudd,

 

You can try something like this:

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

 

 

Kind regards,

Lorena 

Highlighted

Re: How to change tab background colour?

Hi Lorena,

 

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

img1.png

 

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':

img2.png

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

Highlighted

Re: How to change tab background colour?

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

Highlighted

Re: How to change tab background colour?

Hi Lorena,

 

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

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection