Results 1 to 4 of 4

Thread: CUstomizing accordion header

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    56

    Default Answered: CUstomizing accordion header

    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:
    Code:
    .custom-acc-hd {
    color:red;
    font-size:20;
    }
    3. set the "cls" config on an accordion panel to my customized version:

    Code:
    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?

  2. Have a look at:

    Code:
    .x-accordion-hd {
    	background: red !important;
    	font-size:20;
    }
    
    .x-accordion-hd .x-panel-header-text {
    	color: white;
    	font-size:15;
    }
    Regards,
    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •