Custom Tab Background (or color)

ionic-v1
#1

Hello,

I’m working from the Ionic Seed to start a testing project.
From app.css, I’m trying to change the background of my tabs but I can’t override the Seed’s styles.

I tried :

.myTabStyle {
    	background-color:#1b4d71;
    }
    
.myTabStyle:hover {
    	background-color:#098aba;
    }

… assuming I have in tabs.html something like that:

<tab class="myTabStyle" title="Forecasts" icon="icon ion-home" href="#/tab/forecasts">
    <nav-view name="forecasts-tab"></nav-view>
  </tab>

But it doesn’t work…
When we want to override the pre existing styles of the Ionic Seed, how to do it?

Thx in advance for some advices !

1 Like
#2

Hi,
I found something that may help you, it’s only CSS :

.myTabStyle {
    	background-color:#1b4d71 !important;
    }

.myTabStyle:hover {
    	background-color:#098aba !important;
    }

I tryied myself to put a custom color to my header with a personal css with :

.nav_gnrl{
	background-color:#DD006B !important;
}

And it’s overriding pretty well.

The blackpoint of this, is that I don’t know how to change the color of the titles who’s appearing in my nav. I think that we have to add something like [data-title]

.nav_gnrl:[data-title]{
	background-color:#DD006B !important;
}
#3

@Readok thank you very much! Adding !important to my style fixed my very similar issue.

#4

Pleased to help ! @henrycjc