PDA

View Full Version : header styling



ttbgwt
2 May 2012, 3:59 AM
Whats the best way to style headers?

The situation I'm running into is that the parent panel's header I want to style using cls of 'blue' and by default it's child panels blue as well. But there are some situations I need to define the cls for a child panel such as cls = 'red' shown below. Since the child inherits the cls from the parent, the cls on the first child will get cls = 'blue red' and then uses the styling for blue and not red? Whats the best approach for this situation?

I wish there was a headerCls setting for components :)



{
xtype: 'panel',
cls: 'blue',
items: [
{
xtype: 'panel',
cls: 'red'
},
{
xtype: 'panel'
}
]
}


css:


.blue .x-panel-header-default,
.blue .x-panel-header {
font-size: 11px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: blue !important;
}

.red .x-panel-header-default,
.red .x-panel-header {
font-size: 9px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: red !important;
}

Tim Toady
2 May 2012, 6:59 AM
Look at your css. #red?

ttbgwt
2 May 2012, 7:39 AM
That #red was a typo just in my post here.

Look at your css. #red?

Tim Toady
2 May 2012, 7:59 AM
The one with the cls red will be red. I just verified it. If you are referring to the panel with no class, its header will be blue because it is a child that meets your css selector. If you use > to indicate direct child for your blue css that will fix that issue.

--edit--
I should also add if you were to use sass there is a param for header background color if you were to create a ui for it.

ttbgwt
2 May 2012, 9:56 AM
Thanks Tim. If I switch the order of the css then blue gets applied to the one marked as red?



.red .x-panel-header-default,
.red .x-panel-header {
font-size: 9px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: red !important;
}


.blue .x-panel-header-default,
.blue .x-panel-header {
font-size: 11px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: blue !important;
}

Tim Toady
2 May 2012, 10:20 AM
They have the same specificity. Therefore, the last one declared wins. Won't be a problem if you are more specific or use the direct child selector.
eg


.red > .x-panel-header-default,
.red > .x-panel-header {
font-size: 9px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: red;
}

.blue > .x-panel-header-default,
.blue > .x-panel-header {
font-size: 11px !important;
border-color: #d0d0d0 !important;
border-width: 1px !important;
border-style: solid !important;
background-image: none;
background-color: blue;
}