CODEWITHSUNDEEP
ionic-frameworkionic-view
Rathan
Rathan

Reputation: 79

Change color of default nav-bar without losing navigation controls

<ion-view view-title="Title">
  <ion-content>
  Content Here
  </ion-content>
</ion-view>

The above code gives me the default view of ionic I need to change the color of header keeping the default navigation controllers (like menu/back icon) instead of defining a new header bar as below.

<ion-view view-title="Title">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-content>
 Content Here
</ion-content>
</ion-view>

Is there a clean way to slove the problem?

Upvotes: 1

Views: 12339

Answers (3)

Mourad MAMASSI
Mourad MAMASSI

Reputation: 885

For the ionic 2 you can change you background color for navbar like that And you can add custom colors http://ionicframework.com/docs/v2/theming/theming-your-app/

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Connection Bluetooth</ion-title>
        <ion-buttons end>
            <button (click) = "startScanning()" ion-button>
                <!--<ion-icon name="refresh-circle"></ion-icon>-->
                <!--SCAN-->
                <ion-icon name='refresh'  md="md-refresh"></ion-icon>

            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

Upvotes: 5

Kirill Husiatyn
Kirill Husiatyn

Reputation: 828

You can add this line

<preference name="StatusBarBackgroundColor" value="#078ECD"/>

to the file config.xml for editing status bar panel's color

There is a plugin for it: link

Also if you want to change color only for header, add these lines for your css/scss:

ion-header-bar {
  background-color: red;
}

or

.bar.bar-positive {
  background-color: red;
}

or whatever =)

Upvotes: 1

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

Just make any css class

.your-sample-class{
  background: #color-code !important
}

And add this class to nav bar of your project this way:

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>

Upvotes: 4

Related Questions