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

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

How to change tab background colour?

rhudd
9-Granite

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
lgherman
13-Aquamarine
(To:rhudd)

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
lgherman
13-Aquamarine
(To:rhudd)

Hello rhudd,

 

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

tabheader.PNG

Kind regards,

Lorena

rhudd
9-Granite
(To:lgherman)

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

 

That's fixed it, thank you!

lgherman
13-Aquamarine
(To:rhudd)

You are welcome!

 

Kind regards,

Lorena

rhudd
9-Granite
(To:lgherman)

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

lgherman
13-Aquamarine
(To:rhudd)

Hello rhudd,

 

You can try something like this:

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

 

 

Kind regards,

Lorena 

rhudd
9-Granite
(To:lgherman)

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? 

lgherman
13-Aquamarine
(To:rhudd)

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
9-Granite
(To:lgherman)

Hi Lorena,

 

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

Top Tags