View Full Version : Trying to change button gradient

21 Feb 2011, 1:56 PM
I've developed a Touch application so I'm a little familiar with SASS/Compass. I'm working on changing some things with the Ext JS 4 theme and am stumped how to change the gradient for buttons. There is this definition:

$button-default-background-gradient: 'glossy-button';

After a lot of digging it appears that 'glossy-button' eventually gets passed to _background-gradient.scss and a long if-else statement does:

@include background-image(linear-gradient($direction, color_stops(#F7F7F7, #F1F1F1 48%, #DADADA 52%, #DFDFDF)));

So changing the background image of buttons seems different than just changing a variable. How is this done? I don't think I want to change _background-gradient.scss or any of the supplied theme files.

Also, are any of the new Ext JS 4 themes available yet? That would probably give a good example of how to do this.

21 Feb 2011, 11:19 PM

22 Feb 2011, 6:24 AM
Thanks for the reply. So that thread says the Ext JS 4 themes aren't available yet. So what about being able to them the standard button?

8 Mar 2011, 12:05 PM
Any update on if button and panel gradients can be changed yet in PR3?

28 Oct 2011, 2:47 AM
Try this in your my-ext-theme.scss:
$button-default-background-gradient: color-stops(yellow, red);