1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Skin override on child elements

tattoodxb free asked 5 years ago

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?

Damian Gemza staff answered 5 years ago

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 5 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 5 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 5 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 5 years ago

But still, let me know when this you'll do this app :)

Michel pro answered 5 years ago

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>&lt;ul class="nav md-pills pills-primary grey lighten-3"&gt;&lt;/ul&gt;</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>&lt;ul class="nav md-pills pills-secondary grey lighten-3"&gt;&lt;/ul&gt;</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>&lt;ul class="nav md-pills pills-default grey lighten-3"&gt;&lt;/ul&gt;</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">&nbsp;</p>
  </div>
</div>

Damian Gemza staff answered 5 years ago

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 5 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?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • 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
Tags
skins css
About author
tattoodxb
60Support score
6Questions 3Answers 0Snippets