G Web Development Software

cancel
Showing results for 
Search instead for 
Did you mean: 

CSS Style Sheet and Tab Control

I've a tab control and a CSS style sheet.  But, I only seem to be able to set the background color of the tab title bar to the right of the active tabs.  All the tabs, including the tab interior and controls/indicators isn't affected.  The style.css has:


.tab_control {
background-color: lightgray;
}

 

And the HTML class attribute in G Web for the tab control is:

 

tab_control

 

Is there some way to affect the background colors of the tab contents?

0 Kudos
Message 1 of 3
(1,841 Views)

Using the Browser Developer Tools (in my-case Chrome Developer Tools) I was able to find that

 

The css custom property --ni-background:

MilanR_0-1690577648137.png

 

And the css custom property --ni-inactive-background:

MilanR_1-1690577812504.png

 

 

Seem to be used for configuring the background color for the tab + panel and the inactive tab respectively.

 

So maybe configuring those properties will help you style the parts of the tab control:

 

.tab_control {
    --ni-background: red;

    --ni-inactive-background: blue;
}

 

 

 


Milan
0 Kudos
Message 2 of 3
(1,797 Views)

That seems to work, although I see the boxes around the numeric controls within the tabs disappearing.  I'm looking at that now.  Thank you.

0 Kudos
Message 3 of 3
(1,757 Views)