I am working with ExtJS 4.1.1a and I am trying to create a new theme for both a “tabbedPane” and a normal Panel with and “Accordion” layout. I am having trouble changing the colour of the headers for each. That is to say the tabs and the background for the tabs as well as the header background and font colour for the accordion panel. You can see the current setup at http://robroscoe.ca. I am trying to get the headers for both to be black background with white text and maybe the selected or active tab to be the mat purple that is used in the breadcrumb portion in the navigation bar.
It should be noted that I am attempting to set everything up within ExtJS’s SASS preprocessor and any assistance in modifying this instead of the CSS directly would be very much appreciated.
If you haven’t yet, you should really start by familiarizing yourself with the approach to theming in ExtJS 4 – http://docs.sencha.com/ext-js/4-1/#!/guide/theming
Once you have a good understanding of the process, the easiest way I’ve found to theme specific components is by looking through the documentation. With the newer documentation, a lot of the CSS mixins are included along with the API for the components, so it makes it pretty simple to figure out how the default styles are being applied, and then go from their to override/create your own. Here’s an example of the Ext.tab.Tab CSS mixin: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Tab-css_mixin-extjs-tab