Changing tab color in tab container and reference selector

0
Hi, I wanted to style the tabs the tabcontainer widget for dark mode as the default text is not visible. So I gave the tab container a custom class name ‘customtabContainer1’ and the three tabs named them as allBugstab, acceptedBugstab, rejectedBugstab and used the following syntax in the custom style sheet: .mx-name-tabcontainer_name .mx-name-bugTabname (In my case .mx-name-customtabContainer1 .mx-name-allBugstab) and used the color property to make the changes. But there was no change in the tabs color.   Code for styling: .mx-name-customtabContainer1 .mx-name-allBugstab{         background: whitesmoke;         color:#3086da;     }       .mx-name-customtabContainer1 .mx-name-acceptedBugstab{         color: #12a334;     }       mx-name-customtabContainer1 .mx-name-rejectedBugstab{         color: rgb(238, 34, 34);     }   //I also tried this: (No change) .mx-name-customtabContainer1{         .mx-tabcontainer-tabs > li.active > a.mx-name-acceptedBugstab{             color: #12a334;         }     } I have referred the following forum answers and tried using them. Forum Links (used for reference): https://community.mendix.com/link/questions/109666 https://community.mendix.com/link/questions/109672 Also on hovering a tab I wanted to add a background color to it without changing/modifying the default class and using a custom class, can it be done and how?. I have attached some screenshots of the changes made in Studio Pro: Layout: Tab Container custom class: (Tab container class name)   (Tabs):   Styling Code:   UI: Also how to target the background color of reference selector (I wanted to add grey suitable with dark mode). Any Idea how to target the color of tab after it is selected by default it displays the text color as black but I want the same color to be applied like custom tab
asked
3 answers
1

The hovering you can add by nesting the following:  

 

&:hover {
        property: value;
    }

 

I used your screenshot as example:

 

.projectReferenceselector{

 

    .select.form_control{
         background-color: #1c1c1c;

 

        &:hover {
            background-color: #FFFFFF;
    }

 

    .mx-name-......etc

    etc

    etc

 }
}

answered
2

Hi Sidhant,

use the below code for changing the background color for the reference selector.use the class name as ref

 .ref{

    background-color: #ccc;

    select.form-control{

      background-color: #ccc;

    }

   }

 

it will work.

answered
0

I was able to add the color to the tabs and hover effect, Thanks Sigrid Nederpelt, Attar Dasthagir and Tim van Steenbergen . The changes were not getting applied because I was using the custom class for tabs inside the reference selector class itself as highlighted below:

So I declared the custom tab class separately, shown below and then the tab color got changed:
(Updated Styling):
 
For Reference selector instead of .select.form-control I used the following code: 

.projectReferenceselector{

        //background-color: grey;

   

        .form-control{

            background-color: grey;

        }

    }
 

answered