CSS style of selected tab

[Phil Grant]

Hi,
I would like to change the colour of the selected tab (different to the default), I assume I can use the custom CSS box but Can someone give me guidance of how to do it, I’ve used “inspect element” but I can’t figure it out.

Thanks,
Phil

[Phil Grant]

OK found it in another post 🙂

but if I use this in the Custom CSS it doesn’t change the colour of the font to white?

ul.tabRowLast li.tabSelected a{
    background-color: red!important;
	color: white!important;
	font-size:14px;
	font-weight: bold;
}

• This reply was modified 6 years, 10 months ago by Phil Grant.

[Alexander Bautz]

I tried this in my Custom CSS and it sets the background color to red and the forms color to white. Could it be that you have other CSS that overrides it?

Alexander

[Phil Grant]

I want to set the font in the selected tab to white against the red background, doesn’t the “Color: white” do that?

[Alexander Bautz]

Yes, and when I tested it it looks like the attached image. If it doesn’t work in your setup you might have another CSS snippet that overrides it?

Alexander

Attachments:

1. 

   TabColorOverride.png
   

[Craig Campbell]

Hi alex, is there a way to change the size and color of the other tabs that are not selected?

[Alexander Bautz]

Here is an example to use in Custom CSS:

/* Style base tab */
li.tabBase a{
    background-color:gray!important;
    padding:0 2px!important;
}
li.tabBase span{
    color:black!important;
}
/* Style selected tab */
li.tabSelected a{
    background-color:green!important;
    padding:2px!important;
}
li.tabSelected a span{
    color:yellow!important;
}

Alexander

[Craig Campbell]

Thank you Alexander that works great!

[Author]

Posts