javascript - Change ion-view background color - Stack Overflow

admin管理员组

文章数量:1291125

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?

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?

• javascript
• css
• ionic-framework

Share Improve this question Follow edited Feb 3, 2015 at 9:47 Flavien Volken 21.4k1414 gold badges112112 silver badges146146 bronze badges asked Oct 24, 2014 at 14:12 orikokoorikoko 86555 gold badges1515 silver badges2626 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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

.pane {
    background-color: #000;
}

Let me know if it works for you.

Use the pane css class with !important to override the ion default background color,

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

and for changing the font color use:

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

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;
}

本文标签： javascriptChange ionview background colorStack Overflow