PDA

View Full Version : Problem in customizing theme including whole color and font size



tke
30 May 2013, 5:15 PM
We are trying to create 3 similar theme in Ext JS 4.2, usgin Sencha command. The reason is that our customer demands pink based color theme and they want to change font size by clicking buttons (small/middle/large).
Our current idea is to swap the theme by Ext.util.CSS.swapStyleSheet in clicking the button. So, we now try to create 3 themes based on classic theme. We first defined the following base information in sass/var/Component.scss;

$base-color: #ffc0cb !default;
$font-size: 16px !default; // 16px for large, 14px for middle, 11px for small
$font-family: 'MS UI Gothic', 'Meiryo UI', helvetica, arial, verdana, sans-serif !default;
$body-background-color: #fff !default;

We faced 2 problems so far. First, font size in grid panel doesn't change. We have found this can be solved by using Viewport.removeCls/addCls method (this may be cumbersome when using a lot of component that needs similar class handling to change font size). We have also found that adding the following code in sass/src/Component.scss seemes to help to resize font size in grid header part;

.#{$prefix}column-header-text {
white-space: nowrap;
font-size: $font-size;
}

But adding
.#{$prefix}grid-row {
outline: none;
font-size: $font-size;
}
doesn't work for grid data part.

Background color looks like based on $base-color that we defined in Component.scss. We haven't reached any solution for this yet.
Has anyone similar experience and found solution? Any tips are welcome.
Thanks.

existdissolve
30 May 2013, 6:44 PM
Can you be more specific about:

Exactly which text you are trying to change (you say "gridpanel" in one place, "grid header" in another...is it all text in the grid, the header text, etc?)
What is and isn't work regarding the first item?
Also, if you have screenshots you could share, that would be helpful in debugging as well.

tke
30 May 2013, 8:49 PM
Sorry to have confused you, existdissolve.
We try to change font size in whole screen, in other words, all the text in <body>-</body> in html. After I posted my question, background color change seems to be working. However, the font size change problem hasn't solved as you see the attached screenshot image. The screenshot is one with 16px font size specified. I hope the image will clarify our problem.
Thanks.

existdissolve
31 May 2013, 3:07 AM
Okay, for the grid cell font size, the following is probably the reason:


/*ext-theme-classic/sass/var/panel/Table.scss*/
$grid-row-cell-font-size: ceil($font-size * .9) !default;

If you override this in your theme, it should be corrected.

Re: the form labels, I don't immediately see why those aren't working. Can you report the CSS class that is applied to the actual <label> elements?

tke
2 Jun 2013, 8:39 PM
existdissolve, after I posted my last message, I found there's a line that should be overrided as you point out. For data part, I modified sass/src/Component.scss by adding td as

.#{$prefix}grid-row td {
outline: none;
font-size: $font-size;
}

which works. Also, for labels, adding the following code to the same Component.scss seems to work.

.#{$prefix}form-item-label {
font-size: $font-size !important;
}

Thanks.