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>

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 tabs-background-positive tabs-color-active-positive">

The icons need to be further modified to contrast with the new blue color. So, we will further modify the ion-tabs class to the following:

<ion-tabs class=" tabs-striped tabs-icon-top tabs-background-positive tabs-color-light">

We will take a step further and attempt to change the icon's graphic. Let's say that we would like to change the dashboard icon to something that looks more circular.

First of all, we need to refer to the Ionicons documentation, which is available at http://ionicons.com/cheatsheet.html, and find out the class name in relation to the circular analytics icon. For this example, we will use ion-ios-analytics. When we want the user to tap on the icon and activate the dashboard, we want the icon to be highlighted, whereas when it's not active, we need the user to see an outline of the icon. In order to achieve this, we will need to declare the icons that will be used in both an active and inactive state.

In order to do this, we will navigate to the tabs.html file and modify the Dashboard tab icon in the following way:

<ion-tab title="Dashboard" icon-off="ion-ios-analytics-outline" icon-on="ion-ios-analytics" href="#/tab/dash">
  <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

In this particular example, we will edit the dashboard page, where we will modify the content of the list card UI components.

The modification of the dashboard is possible by navigating to the tab-dash.html file, where we will see the different cards declared in the div class of the list card.

The list card is declared as follows:

<div class="list card">
  <div class="item item-divider">Title of List Card</div>
    <div class="item item-body">
    <div>
    List Card Content
  </div>
</div>

By using the Ionic framework, it's possible to include a footer to your card. In our case, we will add a footer to the Health list card, declaring that the user has walked 10,000 steps today. In order to do this, we will add an item-divider class, thus modifying the list card as follows:

<div class="list card">
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      I really can!
    </div>
  </div>
  <div class="item item-divider">
    Great Job, You did 10,000 steps today!
  </div>
</div>

All the modifications that you made until now will result in a Dashboard tab, which will look like the following screenshot: