
Learning Node.js for Mobile Application Development
By :

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.
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...
Change the font size
Change margin width
Change background colour