Jan 24, 2013, 12:01 AM
Custom themes
I wanted only to share my experience with custom themes.
We implemented 3 custom themes, based on the standard ones, just different colors.
A theme was made of a css file + subdirectories with images grouped by area (grid, tabs etc.) where the images are used.
The custom theme is injected after the other themes and this created a problem for tab icons (the tab icon was shifted 1px up) and tree panel row sizes for rows with images (the rows 4px thicker). This was all due to the way the css rules were resolved, basically the custom theme rules took precedence over the default rules. The blue/gray/accessibility themes behaved properly and I think it was because they are interwoven with the theme independent rules.
I ended up solving this by adding a style tag to the page master with these tags:
We implemented 3 custom themes, based on the standard ones, just different colors.
A theme was made of a css file + subdirectories with images grouped by area (grid, tabs etc.) where the images are used.
The custom theme is injected after the other themes and this created a problem for tab icons (the tab icon was shifted 1px up) and tree panel row sizes for rows with images (the rows 4px thicker). This was all due to the way the css rules were resolved, basically the custom theme rules took precedence over the default rules. The blue/gray/accessibility themes behaved properly and I think it was because they are interwoven with the theme independent rules.
I ended up solving this by adding a style tag to the page master with these tags:
.cell-imagecommand-cell .x-grid-cell-inner
{
padding: 1px 0px 0px 0px;
}
/* This needs to be here otherwise the tab icons in the custome theme are shifted 1px up */
.x-tab-icon{
width:16px;
height:16px;
background-position: 0px;
}