CODEWITHSUNDEEP
cssionic-framework
Kingalione
Kingalione

Reputation: 4265

ion-view customize view-title ionic framework

I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?

For example I use a template like this:

<ion-view view-title="HelloWorld">

Now I want that Hello appears in red color and world in white color.

My main problem is that I can't get an access via css to the view-title.

Upvotes: 2

Views: 7485

Answers (3)

jpgrassi
jpgrassi

Reputation: 5742

In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).

<ion-nav-title>
    <div>
        <span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
        Your App Title
    </div>
 </ion-nav-title>

Upvotes: 1

iDeekshith
iDeekshith

Reputation: 433

Try this,

<ion-view>    
     <ion-nav-title>
        <span style="color:red">Hello</span>World
     </ion-nav-title>
</ion-view>

Upvotes: 8

Kingalione
Kingalione

Reputation: 4265

This solves the problem of modifying the view-title:

<ion-nav-title>
    <span class="red">Hello</span>World
</ion-nav-title>

Upvotes: 1

Related Questions