CODEWITHSUNDEEP
ionic-frameworkionic2
asaf
asaf

Reputation: 331

Change font color of ion-title in ionic 2

Hey I make a todo list app in ionic2, I have a sidebar list. In list.html I have the following code:

<ion-navbar *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title class="listTitle">My First List</ion-title>
</ion-navbar>

I'm trying to change the color of "My First List" to white with the css. but it's not working. Also I defined a background color for the title, but it overrides the menu icon. Why is that?

The css:

.listTitle
{
    background-color : #58B43F;
    color : #ffffff !important;
    box-shadow : 0px 6px 10px #888888;
}

My expected result is that the navbar will be in green color with white title and white menu icon. How should I do that?

Thanks.

Upvotes: 1

Views: 15115

Answers (1)

courtness
courtness

Reputation: 76

Ionic 2 uses keywords to reference SASS variables from the app.variables.scss file, which can be added as attributes directly to tags. Using this we can change primary and secondary to green and white:

$colors: (
  primary:    #58B43F,
  secondary:  #fff,
  ...
);

For some reason it didn't work when I tried to apply the secondary colour attribute to the ion-title tag, but a nested text tag works fine (e.g. <p>).

So, below is how these colour aliases are used to style ion-navbar (note specifically where primary and secondary aliases are placed within the tag declarations):

<ion-navbar primary *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title>
    <p secondary>My First List</p>
  </ion-title>
</ion-navbar>

EDIT: Other customisations

To adjust the navbar height, add these to app.variables.scss:

$toolbar-ios-height: 8rem; // ios
$toolbar-md-height: 8rem;  // android

To use a new font-family, override the ion-navbar style:

ion-navbar {
  font-family: 'MyFontFamily';
  text-transform: uppercase;
  letter-spacing: 0.14em; 
}

Upvotes: 2

Related Questions