Color code for each tab

Hello everyone, I have a tab container widget and i have 3 tabs. For each tab i require different color can i achieve that.. can anyone please help. Thanks in advance, Apurupa
1 answers

Hi Apurupa,


First give your tab container a class name in the Appearance tab. Then use this css code in your scss file where you add custom classes:


.ClassNameForTabContainer > .mx-tabcontainer-tabs > li:nth-child(1) {
	background-color: color of the first tab;

.ClassNameForTabContainer > .mx-tabcontainer-tabs > li:nth-child(2) {
	background-color: color of the second tab;

.ClassNameForTabContainer > .mx-tabcontainer-tabs > li:nth-child(3) {
	background-color: color of the third tab;


If you want every tab container to have these colours you can remove then “.ClassNameForTabContainer > “ and every tab container will use these styles