How to change ngb-tabset color/background color ?

If you tabs like this,

<ngb-tabset [destroyOnHide]="false" activeIds="ngb-tab-1">
    <ngb-tab>
      <ng-template ngbTabTitle>Stores</ng-template>
      <ng-template ngbTabContent>
        <app-create-role></app-create-role>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>Coupons</ng-template>
      <ng-template ngbTabContent>
        <app-manage-project></app-manage-project>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>Categories</ng-template>
      <ng-template ngbTabContent>
        <app-workflow></app-workflow>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle>Products</ng-template>
      <ng-template ngbTabContent>
      <app-configuration></app-configuration>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

and now like to change the color then do this way,

 /* this is for clicked or active tabs */
 .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #F4F4F4;
    color: #2E2A25;
    font-size: 15px;
    font-weight: bold;
}

/* this is for normal tabs */
.nav-tabs .nav-link{
	background-color: #2E2A25;
    color: #F4F4F4;
    font-size: 15px;
    font-weight: bold;
	padding: 5px 25px;
}

If you are using nested tabs and need to have two different styles for both, then you can use like this,

<div class="innerTab">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs" style="margin-left:10px;margin-bottom:5px;">
    <li [ngbNavItem]="1">
        <a ngbNavLink>Global</a>
	</li>
</ul>
</div>

and your styles will be,

/* this is for clicked or active tabs */
 .innerTab .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: blue;
    color: white;
    font-size: 15px;
    font-weight: bold;
}

/* this is for normal tabs */
.innerTab .nav-tabs .nav-link{
	background-color: white;
    color: blue;
    font-size: 15px;
    font-weight: bold;
	padding: 5px 25px;
}

One comment

Leave a Reply