CODEWITHSUNDEEP
htmlcssangularjsionic-framework
Mel
Mel

Reputation: 453

Override Ionic Header with custom color

Is it possible to customize the color of a header with ionic ? By custom, I mean using a custom color and not one of the bar-something that are defined. I've tried this, but it doesn't seem to work

<ion-nav-bar class="bar-positive custom-dark">
</ion-nav-bar>

and in CSS: 

 .custom-dark{
 color : #30393A;
 }

Here is a codePen

I don't seem to be able to change the blue color.

Upvotes: 5

Views: 18651

Answers (6)

rajesh
rajesh

Reputation: 1485

Override this Ionic Sass Variable in themes/variables.scss

$toolbar-title: #fff;

Upvotes: 0

Sector0
Sector0

Reputation: 309

Override this Ionic Sass Variable in themes/variables.scss

$toolbar-background:#FFFFFF;

You can find other Ionic Sass Variable list here:

Upvotes: 0

user4423251
user4423251

Reputation:

add these line in your style.css under /www/css directory

.title.title-center.header-item {
        background-color:#F38023!important; // for bg color
        margin:0px!important;
        margin-left:0px!important;
        color: #ffffff!important;
        width: 100%;
    }

Upvotes: 0

&#194;ngelo Rigo
&#194;ngelo Rigo

Reputation: 2165

Since you have first run ionic setup sass as mentioned in the answers, you need to search and identify the variable you want override on the file _variables.css and them you will override in ionic.app.scss.

For the bar-stable color i do find into _variable.scss :

$bar-stable-text: $button-stable-text !default;

And override in ionic.app.scss with:

$bar-stable-text:                 #FFFFFF !default;

This works.

Upvotes: 2

Ed Knowles
Ed Knowles

Reputation: 1925

You can do this with SASS. If you haven't already type into terminal

$ ionic setup sass

You can then use the overrides inside the scss/ directory.

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;

I highly recommend using a CSS pre-processor for Ionic, they have a great lib with everything in variables for you.

Upvotes: 7

Careen
Careen

Reputation: 567

An easy fix is to use:

 .custom-dark{
    color : #30393A !important; // text
    background-color:blue!important; // for bg color
 }

This will overide the current css set..

I think its more appropriate to add to style sheet than in the html itself , as its easier for development , modifying and unnecessary bloating

Upvotes: 4

Related Questions