Anas mohammed pro asked 6 years ago


how to change tab color? .pills-secondary .nav-item .nav-link.active { background-color: #9192a2; } i tried above code to overridde, but didn't get. Kindly help!

Ollie Vincent pro answered 6 years ago


For you info - .pills-secondary means purple tabs.

Anas mohammed pro commented 6 years ago

yes purple i mean. but we can override all css only if we add encapsulation: ViewEncapsulation.None at the component decorator.

Ollie Vincent pro answered 6 years ago


Have you tried
.pills-secondary .nav-item .nav-link.active {
background-color: #9192a2 !important;
}

Damian Gemza staff commented 6 years ago

You can always try to put this code in your global stylesheet instead of your component's stylesheet.

Anas mohammed pro commented 6 years ago

yes, i tried it already. not working. something is overriding

Anas mohammed pro commented 6 years ago

yes, i tried to place on both global and local

Ollie Vincent pro commented 6 years ago

can you post your full project here (with a link)?

Anas mohammed pro commented 6 years ago

i tried to change the material select background color also, but still, here's the code // Changing Dropdown Color .dropdown-primary.colorful-select .dropdown-content li.active span, .dropdown-primary.colorful-select .dropdown-content li.selected span { background-color: #ec407a !important; color: #fff; } // End Changing Dropdown Color

Ollie Vincent pro commented 6 years ago

Can you try removing any color reference from MDB in your classes. Then try to style them. All colour references use the !important tag.

Anas mohammed pro commented 6 years ago

yes i found the solution, wherever we're overriding we should put encapsulation: ViewEncapsulation.None in the @Component() decorator like below: import { Component, OnInit, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-myprofile', templateUrl: './myprofile.component.html', styleUrls: ['./myprofile.component.scss'], encapsulation: ViewEncapsulation.None })

Anas mohammed pro answered 6 years ago


i agree, but this thing doesn't work out on pills tab. have a look on the below code please, i change the default violet color to blue, but still violet:

 

<!-- Nav tabs -->
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-4 pills-secondary white margin blue'" [contentClass]="''">
<!--Panel 1-->
<mdb-tabheading="Profile">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tabheading="Follow">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
<!--Panel 3-->
<mdb-tabheading="Mail">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
<!--Panel 4-->
<mdb-tabheading="Help">
<divclass="row">
<divclass="col-12">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
</div>
</mdb-tab>
</mdb-tabset>


Damian Gemza staff answered 6 years ago


Dear Salmansahnoon, In situation, when you want to change background color of tabs, you have to add specific color class to your tabs. For example, this codes makes my tabs blue. I've added class .blue to property [buttonClass].
<!-- Nav Tabs -->

<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-3 blue'" [contentClass]="'card'">

<!--Panel 1-->

<mdb-tab heading="Profile">

<div class="row">

<div class="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae

placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

<!--Panel 2-->

<mdb-tab heading="Follow">

<div class="row">

<div class="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae

placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae

placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

<!--Panel 3-->

<mdb-tab heading="Contact">

<div class="row">

<div class="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae

placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

</mdb-tabset>
Best Regards, Damian

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags