I am using ionic, I have created my main title using ion-view
<ion-view title="test" class="frame_look_feel"> <ion-nav-buttons
side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons> <ion-content class="has-header">
<h1>Search</h1>
</ion-content> </ion-view>
I am trying to change the color of the title by using css and it keeps to be gray. What is the right way to do is?
You just have to add to your CSS the following line:
.pane {
background-color: #000;
}
Let me know if it works for you.
Your solution is:
.frame_look_feel {
background-color: #FD3583;
}
Adding your style.css after ionic.css
The problem is of css specificity. Your css rule
.frame_look_feel {
background-color: #FFFFFFF;
}
This rule has specificity 10. The ionic rules generally have higher specificity. That's why your style is not applied. Look Specificity for more details. Try something like
.frame_look_feel.custom_color {
background-color: #FFFFFF;
}
If you'd like to change just the text color :
.frame_look_feel {
color: red;
}
of background as said by others
.frame_look_feel {
background-color: red;
}