CUstomizing accordion header

[aorlic]

Hello!

How can I change the look&feel of an accordion's header (For example, to increase the font size and color)?

I tried to use the "cls" config, but it did not seem to work, maybe I am doing something wrong. The summary of what I did:

1. add my custom css class and reference it from the main html
2. add the following code to CSS:

.custom-acc-hd {
color:red;
font-size:20;
}

3. set the "cls" config on an accordion panel to my customized version:

Ext.define('PP.view.PE', {
    extend: 'Ext.container.Container',

    layout: {
        type: 'accordion',
        align: 'stretch',
        multi: true
    },
    
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    collapsed: true,
                    cls: 'custom-acc-hd',
                    title: 'Projects'
                },

Unfortunatelly, this does not change anything.

Any ideas?

[scottmartin]

Have a look at:

.x-accordion-hd {
	background: red !important;
	font-size:20;
}

.x-accordion-hd .x-panel-header-text {
	color: white;
	font-size:15;
}

Regards,
Scott.

[aorlic]

Thank you, it worked.

However, this solution actually scares me more than it helps. Looks like all this styling things will have to be handled directly in the original CSS. This brings 2 important questions:

1. Is there some clean and clear documentation of this? How can we know which CSS element should be used in order to achieve something?
2. Is there a way to somehow "override" this CSS and apply the modifications without changing original files? I've tried it but it did not worked.

Thank you a lot!

[scottmartin]

This is a basic CSS override. Just create a CSS file and included it after the ext-all.css
The best way to find the class needed to override, load the component in the browser and open FireBug or
Developer Tools (in Chrome) and select the element you want to inspect and go from there.

You can use methods like addCls to append or renderers to override. It depends on the component.

Regards,
Scott.