Hi,
Now go to custom.css file add the following styling and then map the css to style your tabs which are customTab1 and customTab2.
.mx-name-customTabContainer .mx-name-customTab1 {
background: blue !important;
color: white !important;
}
.mx-name-cuustomTabContainer .mx-name-customTab2{
background: pink !important;
color: black !important;
}
Then one will display in blue and the other tab in pink color.
Hello Srijan,
If u want to change a colour just have to click on tab container like in the screenshot then
Set the style as ‘Pills’ then if you switch a tab the color will change.
I hope it will be useful.
Use the below code to set the color for active tab. Add this in custom css
mx-name-tabPage17 – This is the name of your tab inside the tab container.
.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a.mx-name-tabPage17 {
background: #0066cc !important;
color: White !important;
font-weight: bold;
border-style: solid;
border-color: #0066cc;
background-color: #0066cc !important;
}
Below code will set the color during page load.
.mx-name-tabContainer2 .mx-name-tabPage12 {
background: #BEBEBE ;
color: White !important;
border-style: solid;
border-color: #ff9900;
}
Hi,
Hi Srijan Vaidya,
1.Go to the front end
2.right click on your tab container
3.click on inspect element and from there you will get the class of the specific tab-container that you are using.
see the below picture as referrence
4. Search for the class in Your Main.css from the path ‘theme\styles\web\css\Main.css.
5.Add “background-color:’your color’;” on that specific class.
Hope this helps!!