Как изменить цвет заголовка в строке заголовка

Question

В моем приложении я пытаюсь изменить цвет заголовка. Для этого я помещаю некоторые темы в файл app.scss. Я могу изменить цвет фона в строке заголовка. Но цвет названия не меняется. Мой файл app.scss как это:

$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; 
} 

И это мой код панели:

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' 
        } 
       ] 
      } 
     ] 
    } 

}); 

Может ли один пожалуйста, помогите ??? Заранее спасибо ..

Answer 1

использования Firebug или Safari (или Chrome) инспектора, чтобы узнать, как дивы встроены в DOM.

Вот что у меня есть, если я инспектировать звание заголовка

Вы можете увидеть DIV с my-titlebar классом, который содержит еще один с классом x-title. Если вы посмотрите справа, вы увидите, что атрибут цвета переносится классом CSS x-title. Поэтому вам нужно переопределить этот класс и НЕ добавлять атрибут цвета в другой класс.

Так вот что вы должны сделать:

Добавьте свойство ЦБС к вашему заголовку

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

Написать CSS

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

И вот вы идете:

Последний совет, который Вы должны использовать !important только тогда, когда у вас нет выбора. В противном случае это не имеет смысла.

Надеется, что это помогает