Custom styling of "ion-nav-view"

ionic-v1
1

Hi!

I am all new to Ionic, and need some help.

I have a page where I want to style the navigation different than on other pages. Is that possible?

This is the code on my page:

 <ion-view title="test">
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

Is it possible to go like this <ion view class="custom" title.....>, if yes - where do I write the CSS?

Thanks

2

What happens when you try that? Does the class get added?

3

I have tried to style it in ionic.app.scss -> But nothing happens, so i really dont know if it will work

4

I have the following class on some of my views:

<ion-view class="gray-content">

and in my main css file:

.gray-content {
    background-color: #e5e5e5;
}

This applies the class and css styling to my view. I haven’t tried adding it to the scss.

5

Thanks for your answer!

Nothing happens if i uses a class, but as soon as i change it to and id -> the background-color for the whole page changes, and still not the navigation-bar.

I might have some problems in my index.html that overwrite the class.

But thanks for your try!

6

Are you using the browser to test? You should be able to inspect the element in the browser and see which class is overriding yours. Also, I’m not sure where your navigation-bar is defined, but mine is an ion-nav-bar above the ion-nav-view, so changing the background-color on the ion-view will not affect the background color of the navigation bar. Here’s a snippet from my index.html:

<ion-nav-bar align-title="center" class="bar-balanced">
    <ion-nav-buttons side="left">
        <button ng-hide="$exposeAside.active" class="button button-clear" ng-click="showMenu()" aria-label="Menu"><i class="icon ion-navicon"></i></button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

If you put some of your code in a codepen I could help out more. :smile: