Change header (or nav bar) color on sidemenu demo

ionic-v1
1

Hi everyone!

I’m newbie on Ionic an have some trouble understanding the “ready-made” app demos. I’m using the “sidemenu” template to build my new app. I has a really nice looking headers on “Playlists” and “playlist” templates, also has the autohide “back” button when I move to a different state. It’s a nice and basic app to start.

My problem is that I can’t find anywhere in the code how to change the Header (or nav bar) color to “bar-positive”. I don’t even know if the bar is a “header” or “nav-bar”. what is the correct way to do this?

Thanks in advance!

2

There are two ways, using the pre-defined classes:

Or changing the sass file and creating your own theme.

3

If you are using the <ion-header-bar> you can add a class attribute using the same classes found here http://ionicframework.com/docs/components/#header. The classes .bar and .bar-header are already applied by the ionNavBar or ionHeaderBar directives.

<ion-header-bar class="bar-balanced">
<ion-nav-bar class="bar-calm">
4

Thanks. the templates don’t use the <ion-header-bar>, or at least I couldn’t find where they use it. The Playlists.html template look like this:

<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

This is the playlist.html template:

<ion-view title="Playlist">
  <ion-content class="has-header">
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

Neither has an explicit header or navigation bar on them, so, I don’t know how to change to “calm” or “positive”. How can i do that?

Thank you so much!

5

I found how to change it! the <ion-nav-bar> and <header> were in menu.html. I simply change the “bar-stable” to “bar-positive” in both directives and works perfectly!

Thanks!!

1 Like
6

I found how to do that …

go to menu.html page in the project and change the class of directive to class you like - bar-calm for example

2 Likes
7

I changed it by going to index.html and changing the bar-calm to assertive or whatever color you wish.

  <ion-nav-bar class="bar-assertive">
  <ion-nav-back-button>
  </ion-nav-back-button>`
</ion-nav-bar>