Tab Container color

Ignition
1

Hi ,
let's say I have a tab container .
I want the active tab to have this blue color
image
I have tried to find an attribute under the tabstyle->active to set that to blue without success.
if I set the boarder color , it will look like the following

image
image905×310 10.5 KB

my question is , what sets this dark gray color above the blue boarder ?
(in case you are wondering why it is dark gray , it is because I am using another theme than light)

thanks in advance

2

In a browser, press F12, and then use the element picker. You can then see what styles are applied to that element.

image
image894×730 66.1 KB

In the top left corner, is the element picker tool. I clicked on an active tab. Examining the styles shows that IA are using box-shadow to get that grey bar.

2 Likes
3

Hit F12 on your browser to open Developer Tools.
Use the Inspect button to highlight the tab.
Somewhere in the Styles window you'll see something like this:

.ia_tabContainerComponent__tab--modern--active {
    font-weight: 500;
    color: var(--neutral-90);
    box-shadow: inset 0 -3px var(--border);
}

It's the var(--border) definition that's adding that.

The inspection gives the clue that we need to disable box-shadow.
Try these settings:

tabStyle.active.borderColor : --<your theme color variable>
tabStyle.active.borderWidth : 2 <or whatever>
tabStyle.active.boxShadow : none
2 Likes