Hi Gaurish,
Not sure if you are still looking for an answer, but this is my suggestion:
It depends on how dynamical your tab headers are. You can target the tab header with the name as Mendix adds a class to the tab-header containing the name:
.mx-name-tabPage1 { //if name is tabPage1
background: green;
}
Note that this way you target the link element (a) inside the tab header. I would recommend to make the call more specific using a class above the tabheader as the name is not unique throughout the application:
.class-of-specific-page .mx-name-tabPage1 { //if name is tabPage1
background: green;
}
As names could change by Mendix during the lifetime of your application, and if the order is fixed, you could also add colours depending on position, since the tabs are rendered as a list:
An example, to colour the first tabheader red and the second tabheader green:
.customtabclass > ul > li:nth-child(1){
background: red;
}
.customtabclass > ul > li:nth-child(2){
background: green;
}
If the tabs are even more dynamical, you could add a Class using JavaScript in a nanoflow on pageload or adding a HTMLSnippet on the page. Hope this helps!
Cheers,
Daan
Hi Gaurish,
Add container inside of each tab and give the respective styling to the container
Thanks,
Bharathidasan