Custom styles and overrides specificity

ionic-v1
1

After reading several posts and several attempts to override certain styles, I’m at a loss.

The styles are overridden in browser builds, everything looks as expected. However, when I build for device or emulator, they are ignored. I’m not sure why this is happening.

As an example, I’m trying to remove the bottom-border from the header bar and change the background color on the sidemenu:

ion-nav-bar.bar.bar-royal {
  border-color: transparent !important;
}

ion-side-menu.menu-left.menu {
  background-color: #5B6166 !important;
}

These declarations reside inside a Sass partial named _overrides.scss and as per the tutorials instructions, I’ve @imported these files before @import "www/lib/ionic/scss/ionic";

Not sure what to do about this, aside from manually editing the actual ionic scss files, which I definitely want to avoid doing.

2

bumpin for posterity

3

Couple thoughts:

Is there already a .platform-ios ion-nav-bar.bar.bar-royal rule somewhere?

Could also be the order not being applied the right way, even though that seems unlikely since you’re already using !important on your class.

It could also be that gulp didn’t update the latest changes in your scss. In my experience sometimes gulp craps out on the watch process when there’s a syntax error in your scss.

Really, the best way to troubleshoot this is by using Safari’s inspector on the emulator to see which rules are being applied and which order. Then if you discover the rule isn’t present at all, it seems your css file might either not be compiled by gulp, or actually used in your index.html.

Hope this helps.