Is it possible to change the underline and text color in tabs widget (premium sets feature) based on the class?
Similar to navbar where the color can directly be entered as a class, I would like to update the underline as well as text color. Anyway for me to achieve that?
The only way I found is to go and update the SASS variable. However, this approach fixes the color for the entire site and eliminates the flexibility of having different colored tabs on different pages.
Thanks Michal.
Will try that.
So why not changing CSS proprerty (not sass, because as you said, it's compiled before user can see it) via javascript?
Coming back to tabs example:
.nav-tabs li.active>a {
border-bottom: 2px solid #yourcolor;
}
.nav-tabs li.active>a:focus {
border-bottom: 2px solid #yourcolor;
}
Grab element and set it a new color. What do you think about it?
Thanks again!
The above method would only work if the colors need to be updated once. It would make updating the colors of the website super easy and allow changing the theme quickly, but it won't help with the dynamic update. When two users with different theme selection log in at the same time on my website, this solution would break down. One, I don't know if it is possible to update SASS variable via JavaScript and even if it is SASS has to compile to CSS before the user will be able to see his/her selected theme.
I wanted to know if I can leverage _color.scss in any form to avoid the solution that I might go with for now:
1) Create a mixin with all the components that I want to update color of (apart from the ones that already work with MDB) and allow the desired color to be passed in to this mixin.
2) Call the mixin for each and every color possible with MDB one by one.
However, I would still argue that this would be a good enhancement to MDB.
Thanks and much appreciated.
I would solve it that way:
1. Create a new SASS file (let's call it theme.scss), which will overwrite MDB files
2. Create a SASS variable $template-color = #yourColor
3. In the file theme.scss list all the elements/components which contains the colors you want to manipulate
4. Assign variable $template-color to all that elements, so it will looks like that example:
.nav-tabs li.active>a {
border-bottom: 2px solid $template-color;
}
5. Then by changing a color property of $template-color you can easily change the colors of all listed elements.
So if $template-color = red -> all listed elements are red, if blue - blue, and so on.
Do you think it can works for you?
Anyway, I've added this issue to our ToDo list and we will think about some better solution. But right now I hope the solution above will be fine for you.
PS: Thank you so much for such a nice words about MDB, it's very motivating and important for us! :)
Hi Michal,
Thanks for your prompt response.
While I understand that I can update the underline color by adding the CSS you posted, my use case requires me to have that color be updated dynamically.
For example, my website colors change based on the logged-in user. The user selects a color from the list (material color list) and once the color is selected, the website changes all the "themable" components to that color. Navbar, buttons, highlight-on-hover etc. This way the website remains the same, but colors change by simply adding the user selected color in the class of each of those components.
This scenario fails for tab widget. I was wondering if there is way for me to work around that using SASS mixins or variables.
The brute force method I can think of is to define all the possible combinations in my own SCSS file as:
.nav-tabs .red li.active>a {
border-bottom: 2px solid red;
}
.nav-tabs .blue li.active>a {
border-bottom: 2px solid blue;
}
.nav-tabs .green li.active>a {
border-bottom: 2px solid green;
}
While it might solve the issue, as you can see it can get very tedious as and when the components do not update based on just a color class.
Do you have any thoughts on this? If it is not possible, can you guys add this as an enhancement? Having used the class based approach for dynamic color change (or themeing) for so many components, I feel it would be ideal if MDB allowed the same for each component.
Thanks once again. Great work with MDB. I am a pro member and I'm loving it.
Hello Ankit,
you can easily change the color by adding the following code to your stylesheet and editing the color class:
.nav-tabs li.active>a {
border-bottom: 2px solid #yourcolor;
}
.nav-tabs li.active>a:focus {
border-bottom: 2px solid #yourcolor;
}
Where #yourcolor is of course color you want :)
