Customise ion-toolbar per page

Ionic Framework ionic-v3
1

I cannot seem to get the styling of the .toolbar-background and .toolbar-content to apply to an ion-toolbar element on a specific page.

For example on a specific page I want the toolbar to have a different look and feel. So I tried setting the style for that page’s scss but the changes are not showing on the ion-toolbar.

.toolbar-background {
    background: rgb(245,245,245); 
    box-shadow: 0px -1px 3px #888888;
}

.toolbar-content {
    text-align: center;
}

How can I customise the toolbar per page in the scss file?

1 Like
2

This doesn’t seem to work either as recommended here.

.toolbar {
    .toolbar-background {
        background: rgb(245,245,245); 
        box-shadow: 0px -1px 3px #888888;
    }
    
    .toolbar-content {
        text-align: center;
    }
}
3

So what you can try to do is wrap it with the class for that page. So in my test, I have a class HomePage. When Ionic loads a page it will take the class name and and apply a css class with that same name on the html.

.home-page {
  .toolbar-background {
    background: rgb(245, 245, 245);
    box-shadow: 0px -1px 3px #888888;
  }
  .toolbar-content {
    text-align: right;
  }
}
4

Hi @mhartington

This has already been done. Sorry I did not include this in sample above.

.userregister-page {
    .toolbar-background {
        background: rgb(245,245,245); 
        box-shadow: 0px -1px 3px #888888;
    }
    
    .toolbar-content {
        text-align: center;
    }
}

Something I have just spotted now. Normally you would set the class of the page on the ion-content:

<ion-content padding class='userregister-page'>

However an ion-toolbar exists outside of the ion-content as per the examples.

How would the CSS be applied then?

5

The class is cloned from ion-content to ion-page element

6

As inspected by Chrome:
image

They are not being applied with the scss.

.userregister-page {
    .toolbar-background {
        background: rgb(245,245,245); 
        box-shadow: 0px -1px 3px #888888;
    }
    
    .toolbar-content {
        text-align: center;
    }
}

<ion-content padding class='userregister-page'>
...
</ion-content>
<ion-toolbar position='bottom'>
</ion-toolbar>
7

It works. I don’t see which .toolbar-background element you watch.

8

So the classes on the ion-content can be ignored for now. Note to self, need to remove them

What I’m talking about is at runtime, there’s a class that get’s applied to the page.

image

So in this case, I do

.getting-starter-page{

}

And it would include the toolbar.

9

Weird. So I created a duplicate of the page I was struggling with, and the toolbar custom scss worked. Wonder what was special about the page that would not take the scss.