Results 1 to 4 of 4

Thread: CUstomizing accordion header

  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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    56

    Default

    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!

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

Posting Permissions

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