CODEWITHSUNDEEP
sencha-touchthemessencha-touch-2
Arindam Mukherjee
Arindam Mukherjee

Reputation: 2285

How to change the color of the title in title bar

In my application, i am trying to change the color of the title. For that, i put some themes in app.scss file. I am able to change the background color of the title bar. But color of the title is not changing. My app.scss file is like this:

    $base-color: #588aad; // go big blue!$include_default_icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


@include pictos-iconmask("bookmarks");
@include pictos-iconmask("compose");
@include pictos-iconmask("trash");
@include pictos-iconmask("search");
@include pictos-iconmask("bookmark2");


@include sencha-toolbar-ui('blue', #EEEEEE,'matte');
.x-toolbar .x-toolbar-title {
    color: #5a3d23;
}

And this is my panel code:

  Ext.define('MyApp.view.TitlePanel', {
    extend: 'Ext.Panel',

    config: {
        modal: false,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                height: 120,
                ui: 'blue',
                title: 'Teritree Bussiness Portal',
                items: [
                    {
                        xtype: 'image',
                        docked: 'left',
                        height: 118,
                        width: 202,
                        src: 'resources/images/Logo.PNG'
                    }
                ]
            }
        ]
    }

});

Can any one please help??? Thanks in advance..

Upvotes: 0

Views: 12343

Answers (1)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12959

Use Firebug or Safari (or Chrome) inspector to find out how divs are embedded in the DOM.

Here is what I have if I inspect the title of a titlebar

You can see a div with a my-titlebar class which contain another one with the class x-title. If you look on the right you can see that the color attribute is carried by the x-title CSS class. Therefore you need to override this class and NOT add a color attribute to another class.

enter image description here

So here's what you should do :

Add a cls property to your titlebar

xtype: 'titlebar',
cls:'my-titlebar',
docked: 'top',
height: 120,

Write the CSS

.my-titlebar .x-title{
  color:white;
}

And here you go :

enter image description here

Last advice, you should use !important only when you have no choice. Otherwise it makes no sense.

Hope this helps

Upvotes: 8

Related Questions