Modifying an Ionic project

In order to build upon the knowledge that we have gained and the work that we have previously done, we will modify the user interface of the project that we previously created. We will start off by modifying the header.

Modifying the header

Let's say that we would like to change the header bar to a calm blue color. Navigate to the index.html file available at www | index.html.

Refer to the body block, and using the reference UI components, change the ion-nav-bar class to the following:

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

Modifying the tab colour, icons, and names

Since we have decided to change the header color, we will go ahead and modify the tab bar to make its color match the header color. We should first navigate to the tabs.html, file which is available at www | templates | tabs.html, and change the ion-tabs class to the following:

<ion-tabs class="tabs-striped tabs-icon-top...