Reputation: 2285
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
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.
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 :
Last advice, you should use !important
only when you have no choice. Otherwise it makes no sense.
Hope this helps
Upvotes: 8