Main Region

How to change the FOEX Layout Panel color ?
5 answers | 781 views

JA
Oct 11, 2013 05:55 +00:00

I don't know Javascript. Can someone help is there a way to set Additional Config to achieve this ? What value i need to set in Additional Config.

Thanks

2 comments

JA
jaganbreddy Oct 11, 2013 20:07 +00:00 

Matt, This changes the body color of the panel. That's great. How do I change the header color of the panel (the gray color I see) and also change the icon if the panel is positioned as Tabs.

This will be of great help to build a colorful looking UI.

Thanks

JA
jaganbreddy Oct 18, 2013 04:11 +00:00 

Thanks Matt for all the suggestions. The customizable theme from newbridgegreen is also an attractive option.. We are doing our UX design now. Once it's ready, we will share with newbridgegreen and see if it can be done using their custom theme.

Please try to answer the questions if possible onhow to customize the colors without using the theme from newbridgegreen. Thanks

MN
Oct 17, 2013 12:52 +00:00

Your question is not clear if you want this styling applied to individual components or consistently across the entire app.

For consistently styling the whole app you should focus your attention on the Ext JS theme documentation on how to do this:

http://docs.sencha.com/extjs/4.0.7/#!/guide/theming

Alternatively if you wanted to purchase a theme then perhaps you should have a look at the following site which sells a customizable theme:

http://www.newbridgegreen.com/extjs

If this is the path you want to take then we will advise you how to include a customizable theme in v1.2.x of FOEX.

For individual components it requires CSS changes similar to what is described in my previous answer. I will endeavour to answer 6 items listed after performing some further investigation.

It is also possible for any developer to work this out by inspecting the CSS classes applied to the HTML markup and devising what changes they would like to make by adding their own CSS overrides.

Lastly the tab icon is based on the "iconCls" setting for the direct child component of the tab panel layout region. So please set "iconCls":"fx-icon sports-football" (as 1 example) to the additional config of the direct child region whetehr it's a nested layout, form, grid, etc.

0 comments

MN
Oct 11, 2013 10:02 +00:00

You can add the following to the additional config:

"bodyStyle":{"background":"#83e86f"}

As documented here: http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-cfg-bodyStyle

0 comments

MN
Oct 13, 2013 13:38 +00:00

Unfortunately there is no API to change the title header colour so you're going to have to use some CSS. If this is on a grid by grid basis or for any other region e.g. form then I suggest that you give your grid/region a static id (e.g. GRID1 in my example below) )and then use CSS similar to the following:

#GRID1 div.x-panel-header {
   background: #83E86F;
}

To change the icon please include the following in the additional config:

"iconCls":"fx-icon sports-football"

Note: we have included the famous famfamfam Icon-Pack within the framework which you can choose from (for small buttons). To do this open the Icon-Overview in a new Browser Window/Tab and see if you find something you like. Lets say you like the "sports_football" icon and would like to use that for your entry, then simply specify "fx-icon sports-football" as custom CSS Class. As you can see you have to prefix the icon-name with "fx-icon " (don't forget the blank) and replace the underscores with hyphens.

0 comments

JA
Oct 16, 2013 06:01 +00:00

Matt, Your answers helped me to control the color of the region body and the icon. I would like to know how to control the colors for the following :

  1. If I define a pane to be Tab Panel, how do I control the color of the Tabs and the icons for the regions displayed in the panel
  2. How do I control the header bar behind those tabs in a panel
  3. How do I control the header bar color in a panel / region
  4. How do I control the color for a collapsed accordiion and open one
  5. How do I control the color of a collapsed West / East pane ?
  6. How to control the color of pagination bar ?

I understand you are coming up with themes in new version but for us it's importance to provide some good look and feel with current version. Please help us how to do this.

0 comments

MN
Oct 21, 2013 15:41 +00:00

As previously advised your styling requirements should be controlled through the theme referring to the Ext JS themeing guide. We will provide assistance for integrating theme's into FOEX but not for the theme itself.

If you wish to style individual components you will need to understand CSS rules and override them based on your requirements. Below is an example of possibly how you could look at writing your selectors as per your above request:

/* Blue Non-Active Tab */
.x-tab-default-top {
    background-color: #8CCADE;
    background-image: linear-gradient(center top , #DCDCDC, #8CCADE);
    background-image: -o-linear-gradient(center top , #DCDCDC, #8CCADE);
    background-image: -moz-linear-gradient(center top , #DCDCDC, #8CCADE);
    background-image: -webkit-linear-gradient(center top , #DCDCDC, #8CCADE);
    background-image: -ms-linear-gradient(center top , #DCDCDC, #8CCADE);
}

/* Green Active Tab */
.x-tab-top-active {
    background-color: #AFDE8C;
    background-image: linear-gradient(center top , #FFFFFF, #AFDE8C);
    background-image: -o-linear-gradient(center top , #FFFFFF, #AFDE8C);
    background-image: -moz-linear-gradient(center top , #FFFFFF, #AFDE8C);
    background-image: -webkit-linear-gradient(center top , #FFFFFF, #AFDE8C);
    background-image: -ms-linear-gradient(center top , #FFFFFF, #AFDE8C);
}

/* Yellow Tab Bar Background */
.x-tab-bar {
    background-color: #FAF085;
    background-image: linear-gradient(center top , #FCF7BC, #FAF085);
    background-image: -o-linear-gradient(center top , #FCF7BC, #FAF085);
    background-image: -moz-linear-gradient(center top , #FCF7BC, #FAF085);
    background-image: -webkit-linear-gradient(center top , #FCF7BC, #FAF085);
    background-image: -ms-linear-gradient(center top , #FCF7BC, #FAF085);
}

/* Blue Toolbar & Pagination */
.x-toolbar-default {
    background-color: #D3E1F1;
    background-image: linear-gradient(center top , #DFE9F5, #D3E1F1);
    background-image: -o-linear-gradient(center top , #DFE9F5, #D3E1F1);
    background-image: -moz-linear-gradient(center top , #DFE9F5, #D3E1F1);
    background-image: -webkit-linear-gradient(center top , #DFE9F5, #D3E1F1);
    background-image: -ms-linear-gradient(center top , #DFE9F5, #D3E1F1);
}

/* Blue Panel Header */
.x-panel-header-default {
    background-color: #CBDDF3;
    background-image: linear-gradient(center top , #DAE7F6, #CDDEF3 45%, #ABC7EC 46%, #ABC7EC 50%, #B8CFEE 51%, #CBDDF3);
    background-image: -o-linear-gradient(center top , #DAE7F6, #CDDEF3 45%, #ABC7EC 46%, #ABC7EC 50%, #B8CFEE 51%, #CBDDF3);
    background-image: -webkit-linear-gradient(center top , #DAE7F6, #CDDEF3 45%, #ABC7EC 46%, #ABC7EC 50%, #B8CFEE 51%, #CBDDF3);
    background-image: -ms-linear-gradient(center top , #DAE7F6, #CDDEF3 45%, #ABC7EC 46%, #ABC7EC 50%, #B8CFEE 51%, #CBDDF3);
}

/* Accordion Header Active Green Background */
.x-accordion-hd {
    background: none repeat scroll 0 0 #C0FCBC !important;
}

/* Accordion Header Blue Background */
.x-panel-collapsed .x-panel-header-default-top {
    background: none repeat scroll 0 0 #DFE9F5 !important;
}

/* Collpased Pane */
.x-panel-header-default-left .x-region-collapsed-placeholder, .x-panel-header-default-right .x-region-collapsed-placeholder{
    background-color: #DCDCDC;
    background-image: linear-gradient(right center , #8CCADE, #8CCADE);
    background-image: -o-linear-gradient(right center , #8CCADE, #8CCADE);
    background-image: -moz-linear-gradient(right center , #8CCADE, #8CCADE);
    background-image: -webkit-linear-gradient(right center , #8CCADE, #8CCADE);
    background-image: -ms-linear-gradient(right center , #8CCADE, #8CCADE);
}

Since these are overrides of the default theme we do not support the above styles, they are merely a guide/reference as to how you could possibly change the colouring of components. It is the developer's responsibility to ensure that they are tested and working across all required browsers as well as adding additional CSS specificity (if required) e.g.

#GRID1 .x-tab-default-top {
...
}
0 comments

You must log in or sign up to post questions and answers.