change tab color

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

Damian Gemza staff commented 7 years ago

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

---

salmansahnoon pro commented 7 years ago

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

---

salmansahnoon pro commented 7 years ago

yes, i tried to place on both global and local

---

Ollie Vincent pro commented 7 years ago

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

---

salmansahnoon pro commented 7 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 7 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.

---

salmansahnoon pro commented 7 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 })

---

<!-- 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>

salmansahnoon pro commented 7 years ago

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

---