Tab Container

0
In Tab container How can I change the color of tab  for example set different color for divisional opportunity and different color for flex opportunity. In properties of divisional opportunity of tab container appearance is not there so how can I change the color or apply CSS.        
asked
5 answers
3

Hi,

  1. Set name for your tabContainer, for  example:  ‘customTabContainer’
  2. Set names for your tabPages, for eg:  ‘customTab1’ and ‘customTab2’

 

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.

answered
2

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.

answered
1

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;

}

answered
0

Hi,

  1. Set name for your tabContainer, for  example:  ‘customTabContainer’
  2. Set names for your tabPages, for eg:  ‘customTab1’ and ‘customTab2’
answered
0

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!!

answered