change tab color

Topic: change tab color

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!

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

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.

Add comment

Ollie Vincent pro answered 6 years ago

1 0 Best answer

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 })

Add comment

Anas mohammed pro answered 6 years ago

0 0 Best answer

<p>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:</p>
<p> </p>
<p><br />
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-4 pills-secondary white margin blue'" [contentClass]="''"><br />
<br />
<mdb-tabheading="Profile"><br />
<divclass="row"><br />
<divclass="col-12"><br />
<br><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><br />
</div><br />
</div><br />
</mdb-tab><br />
<br />
<mdb-tabheading="Follow"><br />
<divclass="row"><br />
<divclass="col-12"><br />
<br><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><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><br />
</div><br />
</div><br />
</mdb-tab><br />
<br />
<mdb-tabheading="Mail"><br />
<divclass="row"><br />
<divclass="col-12"><br />
<br><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><br />
</div><br />
</div><br />
</mdb-tab><br />
<br />
<mdb-tabheading="Help"><br />
<divclass="row"><br />
<divclass="col-12"><br />
<br><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><br />
</div><br />
</div><br />
</mdb-tab><br />
</mdb-tabset></p>

Please insert min. 20 characters.

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:

<mdb-tabset #staticTabs [buttonClass]="'nav-tabs tabs-4 pills-secondary white margin blue'" [contentClass]="''">

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

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

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

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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].
<div>
<pre>

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

<mdb-tab heading="Profile">

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

</mdb-tab>

<mdb-tab heading="Follow">

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

</mdb-tab>

<mdb-tab heading="Contact">

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

</mdb-tab>

</mdb-tabset></pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

Anas mohammed

Pro User 4Support score
6Questions 2Answers 0Snippets