Setting the font color and bachground color of New-UDTab / New-UDTabContainer

Hey everyone, something seems to have changed from an older version here.

I’m trying to set the tab background and font color on New-UDTab / New-UDTabContainer.

In my theme, i can specify

'.mdc-tab-bar' = @{
        'background-color' = "#a80000"
    }

which handles the background, but i can’t set either the active tab’s background color or the font color. what am i missing?

Hi @artvandelay440
If you’re refering to 2.8.3 or above i believe there is a “UDTab” definition ready in the theme ?

Hi @artvandelay440 I use the following CSS to style my tabs the way I want them

 '.tabs'= @{
'color' = "#2c505f"
'margin-top' = "-7px"
'background-color' = "#2c505f"
}

'.tabs .tab a:hover'= @{
'background-color' = "#557583"
'color'= "#ffffff"
}

'.tabs .tab a.active' = @{
'background-color' = "#2c505f"
'color'= "#ffffff"
}
'.tabs .tab a:focus.active' = @{
 'background-color' = "#1e353f"
'color'= "#ffffff"
}
'.tabs .indicator'= @{
'background-color' = "#fff"
}
'.tabs .tab a'= @{
'color' = "#fff"
}
1 Like

I am using 2.8.3, and tried both of these solutions, but unfortunately neither is working for me. I’ll keep looking, thanks. I know I’ve done it in previous versions, so checking for what has changed.

@artvandelay440
try using this, this is my config for the tabs. Result in a screenshot below:

      UDTabActive                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   = @{
        ActiveBackgroundColor = '#FFFFFF'
        ActiveFontColor       = '#e3000f'
      }
      UDTabIndicator                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                = @{
        IndicatorColor = '#e3000f'
      }
      UDTabActiveIcon                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               = @{
        BackgroundColor = '#FFFFFF'
        ActiveFontColor = '#e3000f'
      }
      UDTabIcon                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     = @{
        LineHeight = 'inherit'
        Height     = 'auto'
        FontColor  = '#FFFFFF'
      }
      UDTabs                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        = @{
        BackgroundColor = '#FFFFFF'
        FontColor       = '#e3000f'
        Height          = 'auto'
      }
      UDTab                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         = @{
        FontColor = '#e3000f'
      }
      '.mdc-tab__ripple::before'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    = @{
        'background-color' = '#FFFFFF'
      }
      '.mdc-tab__ripple::after'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     = @{
        'background-color' = '#FFFFFF'
      }

2 Likes

That worked! Thanks again!!!

That did also the trick for me, i spent hours on the colors :wink:
I used the developer tools from firefox/chrome to find the ‘.mdc-tab__ripple::before’ and ::after class.

1 Like