Clever Geek Handbook

Change background color with ionic background

I am using ionic, I 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 using css and it remains grayed out. What's the correct way?

+3


source to share


5 answers


You just need to add the following line to your CSS:

.pane {
    background-color: #000;
}


Let me know if this works for you.

+6


source


Use pane

css class c !important

to override default background color,

   .pane {
        background-color: #464646!important;
    }


and to change the font color use:

.bar.bar-stable .title{
    color:#FFF!important;
}
0


source


Your choice:

.frame_look_feel {
    background-color: #FD3583;
}

Adding style.css after ionic.css

-1


source


The problem is css specific. Your css rule is

.frame_look_feel {
    background-color: #FFFFFFF;
}

This rule has a specificity of 10. Ionic rules usually have a higher specificity. This is why your style is not being applied. See Specificity for more details. Try something like

.frame_look_feel.custom_color {
    background-color: #FFFFFF;
}
-1


source


If you only want to change the color of the text:

.frame_look_feel {
color: red;
}
Run codeHide result


background as others say

.frame_look_feel {
background-color: red;
}
-1


source






More articles:


All Articles