poiuytrez poiuytrez - 5 months ago 293
CSS Question

Change ion-view header color in ionic

I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:

<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>


I tried:

<ion-view view-title="Search" class="bar bar-header bar-assertive">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>


But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?

Answer

Some ways to do this:

  1. You could add the ion-nav-bar to each view.

    <ion-view view-title="Page 1">
      <ion-nav-bar class="bar-balanced">
        <ion-nav-back-button></ion-nav-back-button>
      </ion-nav-bar>
      <ion-content>
        ...
      </ion-content>
    </ion-view>
    

    Codepen example

  2. You could also update the background-color (and any other properties) by using ng-style

    Main navbar:

     <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
        <ion-nav-back-button></ion-nav-back-button>
      </ion-nav-bar>
    

    CSS:

    .nav-bar-block, .bar {
      background-color: inherit !important;
    }
    

    Controller:

    $scope.$on('$ionicView.beforeEnter', function() {
        $rootScope.viewColor = 'green';
    }); 
    

    Codepen example

Comments