Topic: Skin override on child elements
I want to override child elements colors via skins for example:
.rsa-skin .navbar .navbar-nav .nav-item .dropdown-menu a {
color: #000;
}
however it is not included on the docs how to target child elements
also in the hover/focus/active state:
.rsa-skin .navbar .navbar-nav .nav-item .dropdown-menu a:hover,
.rsa-skin .navbar .navbar-nav .nav-item .dropdown-menu a:focus,
.rsa-skin .navbar .navbar-nav .nav-item .dropdown-menu a:active {
background-color: #f2f2f2;
}
can you do a sample how to target child elements?
Dear Michel,
Thanks for your report. We have to take a look at this problem.
Did you encounter some other problems with our components while using custom skin?
Best Regards,
Damian
Michel pro commented 6 years ago
Hi. Thanks for your reply.
No, so far those two but I have to admit I haven't had time to go over all visual components while changing skins to verify which other has that problem.
In a near future I will implement the great flavor of "skinning" the App with predefined skins and having a custom skin built by the end user, in that path I will build a mini-version of the App with the navigation and a single component featuring almost all visual components well organized and use it as a preview launched in another browser tab so that the end user can decide which skin to use, when I get there I will share the link. I'll do my best to make it open and not business specific with plenty of Lorem Ipsum everywhere and the skin name as a query string parameter.
Damian Gemza staff commented 6 years ago
Michel, I'm waiting to check this application! It would help us to debug this problem.
You can send it to me here: d.gemza@mdbootstrap.com
Best Regards,
Damian
Michel pro commented 6 years ago
The task seamed worthy to my boss at first but we are expanding and therefore creating tons of new features in the app so my time is too tight to do what I initially wanted. He indeed moved the task to the bottom of the backlog :D so I have my hands tied here :(
Damian Gemza staff commented 6 years ago
But still, let me know when this you'll do this app :)
Hi guys.
I have just created my new skin and it works well for buttons, top nav and the sidenav. Until now two things has jumped up for everyone's eyes in our team (By the way we bought the Pro version for only one project) and they are:
1.- The range slider handle keeps being blue
2.- The nav pills have colors that has nothing to do with the skin
I have modified the demo project to test all built-in skins and my new skin and all of them do the same with these two elements. The following piece of markup will show you that:
pills-primary
pills-secondary
pills-default
have colors from the mdb defaults and not from any of the skin definitions.
<div class="row">
<div class="col-12">
<p class="mt-3 mb-2">Primary color for Active option <code><ul class="nav md-pills pills-primary grey lighten-3"></ul></code></p>
<ul class="nav md-pills pills-primary grey lighten-3">
<li class="nav-item"><a class="nav-link active" href="#!">Option1</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option2</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option3</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option4</a></li>
</ul>
<p class="mt-3 mb-2">Secondary color for Active option <code><ul class="nav md-pills pills-secondary grey lighten-3"></ul></code></p>
<ul class="nav md-pills pills-secondary grey lighten-3">
<li class="nav-item"><a class="nav-link active" href="#!">Option1</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option2</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option3</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option4</a></li>
</ul>
<p class="mt-3 mb-2">Default color for Active option <code><ul class="nav md-pills pills-default grey lighten-3"></ul></code></p>
<ul class="nav md-pills pills-default grey lighten-3">
<li class="nav-item"><a class="nav-link active" href="#!">Option1</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option2</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option3</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Option4</a></li>
</ul>
<p class="my-3"> </p>
</div>
</div>
Dear @tattoodxb
Could you please try with creating your new custom skin? This is the best approach to change styling in skins - just add new, and use it.
Please check our Skin Documentation, and let me know about results.
Best Regards,
Damian
tattoodxb free commented 6 years ago
I have already looked into that documentation, however there is no sample how to target a child element.
Can you please provide a sample of how to target a child element?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: mac
- Browser: chrome
- OS: mojave
- Provided sample code: Yes
- Provided link: No