CODEWITHSUNDEEP
cssionic-framework
poiuytrez
poiuytrez

Reputation: 22518

Change ion-view header color in ionic

I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:

<ion-view view-title="Search">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

I tried:

<ion-view view-title="Search" class="bar bar-header bar-assertive">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?

Upvotes: 23

Views: 56575

Answers (11)

&#214;nder Ceylan
&#214;nder Ceylan

Reputation: 51

If you're using scss within your app, you can create your own custom bar class and use ionic's bar mixins in it.

$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);

.bar {
    &.bar-custom {
        @include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
        &.bar-footer{
            background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
        }

        .button {
            @include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
            @include button-clear(#fff, $bar-title-font-size);
        }
    }
}

After defining your class, you can use your new custom bar class with ion-nav-bar directive.

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

Upvotes: 0

user4423251
user4423251

Reputation:

put these lines in your style.css under /www/css/ directory of your ionic project

.title.title-center.header-item {
    background-color:#4a87ee;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
}

Upvotes: 0

user4423251
user4423251

Reputation: 

//add these lines in your style.css file under /www/css/ yoyr project    directory
 .title.title-center.header-item {
    background-color:#30393A;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
 }

Upvotes: 0

hooligan
hooligan

Reputation: 15

We got it working in CSS with:

.title.title-center.header-item {
    background-color: black;
    margin: 0px;
}

This means that we just refer to the Angular generated header classes directly with this CSS. Hope this helps!

Upvotes: 1

Marcelo Lazaroni
Marcelo Lazaroni

Reputation: 10239

If you want to change the ion-nav-bar this here works like a charm:

1 . Create a main controller to take care of your index page and all views within it. 2. Add this function to the controller:

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen: <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.

5 . Have fun!

Upvotes: 0

Tenoch G
Tenoch G

Reputation: 171

I modified the solution of @shakib to fit my needs, in my case the user sets the theme by clicking the app logo and thus the bar color should change. If this is your case you don't need to do the switch case because you want to change all views 

$rootScope.$on("$stateChangeStart", function (event, toState) {
          var element;
          if (toState.name){
              element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
              if (debugMode) console.log(element);
              // I get the bar-class from my localStorage where I keep the user settings
              var saved_bar_class = $localStorage.get('bar-class','bar-calm');

              element.removeClass('bar-pink');
              element.removeClass('bar-calm');
              element.addClass(saved_bar_class);
          //    Here We could use a Switch Case on toState.name to put a different color to each state

          }
      });

Also when the user clicks the app logo I want to immediately change the bar color in order to give feedback to the user of what that button do. The above code won't do that because we haven't changed state yet, to fix this just add this code to your 'change theme' function 

$scope.changeAppTheme = function () {
        var element;
        element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            // some code to select the theme
            element.removeClass('bar-pink');
            element.removeClass('bar-calm');
            element.addClass('bar-pink');
            // some other code
    };

In this case I just have two colors, the ionic calm and a pink one that I defined Hope this helps someone

Upvotes: 1

nium
nium

Reputation: 11

You can override $bar-stable-text color (taken from _variables.scss from ionic lib)

For example, in your scss change 

$bar-stable-text: green !default;

Upvotes: 0

Jess Patton
Jess Patton

Reputation: 2486

if you are using different states and each state has a different controller than just have a $scope variable like $scope.stateone = "true" etc. Then on your ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class takes classes and an expression, whichever expression is true that is the class that is assigned. you can use ng-class with any boolean expression. this is how you can have a different color on each page.

Upvotes: 1

Brandy Carney
Brandy Carney

Reputation: 1186

Some ways to do this:

  1. You could add the ion-nav-bar to each view. 

    <ion-view view-title="Page 1">
  <ion-nav-bar class="bar-balanced">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
    ...
  </ion-content>
</ion-view>

    Codepen example

  2. You could also update the background-color (and any other properties) by using ng-style

    Main navbar: 

     <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

    CSS: 

    .nav-bar-block, .bar {
  background-color: inherit !important;
}

    Controller:

    $scope.$on('$ionicView.beforeEnter', function() {
    $rootScope.viewColor = 'green';
});

    Codepen example

Upvotes: 57

shakib
shakib

Reputation: 5469

Could not find a clean solution for this, but one hack might be to use the $stateChangeStart event and set the class name manually.

angular.module('starter')
.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-header-bar'));
            switch(next.name) {
                case 'tab.chats':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-calm');
                    break;
                case 'tab.dash':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-positive');
                    break;
                default :
                    element.removeClass('bar-calm');
                    element.removeClass('bar-positive');
                    element.addClass('bar-balanced');
            }
        }
    });
});

fiddle

EDIT The idea is same for sidebar template,

Updated fiddle

Notice the line

<ion-nav-bar class="bar-positive">

in menu.html template, it denotes the base header color class. but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStart event,

code:

.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            console.log(element);
            switch(next.name) {
                case 'app.search':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-dark');
                    element.addClass('bar-assertive');
                    break;
                case 'app.browse':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-assertive');
                    element.removeClass('bar-dark');
                    element.addClass('bar-energized');
                    break;
                default :
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-assertive');
                    element.addClass('bar-dark');
            }
        }
    });
});
  1. here the state name is checked to see which page is activating ex. app.search
  2. then according to requirement specific color class is assigned removing other color classes.

ionic color options

hope this helps.

Upvotes: 3

LarsBauer
LarsBauer

Reputation: 1535

Try using the following code:

<ion-view>
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Search</h1>
  </ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Upvotes: 0

Related Questions