Override/Change Button Background Gradient Colors

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Override/Change Button Background Gradient Colors

Jonathan Wolfe
Hi,

So, I thought this would be fairly straightforward, but I'm having a hard time overriding a buttons background css gradient colors.  The modern theme goes from a whitish color to dark grey for the 'button-css' property.  How do I set the from/to colors?  I perused the documentation, but couldn't get an example to work for me.  

Thanks for your help!
Jonathan





------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Override/Change Button Background Gradient Colors

Norbert Schröder
Hi Jonathan,

you can find a description of the gradient background decorator in the API viewer under qx.ui.decoration.MLinearBackgroundGradient. The properties you are looking for are "startColor" and "endColor". In the Modern theme's "button-css" decorator the "startColor" is set to "button-start" and the "endColor" to "button-end". The actual color values of "button-start" and "button-end" are defined in ../framework/source/class/qx/theme/modern/Color.js and equate to "#F0F0F0" and "#AFAFAF", respectively.

In your application you can easily modify any of the predefined colors of a given theme by editing the file Color.js in your application's theme folder. For example, you could add the following color definitons and replace "#myStartColor" and "#myEndColor" with the colors of your choice:

"button-start" : "#myStartColor",
"button-end" : "#myEndColor"

Likewise you might want to modify your Decoration.js or even Appearance.js, in order to fine-tune a specific decorator or a widget's overall appearance.

HTH,

  Norbert



Jonathan Wolfe wrote
Hi,

So, I thought this would be fairly straightforward, but I'm having a hard
time overriding a buttons background css gradient colors.  The modern theme
goes from a whitish color to dark grey for the 'button-css' property.  How
do I set the from/to colors?  I perused the documentation, but couldn't get
an example to work for me.

Thanks for your help!
Jonathan

*

*

------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Override/Change Button Background Gradient Colors

MartinWittemann
Administrator
In reply to this post by Jonathan Wolfe
Hello Jonathan,
that is in deed fairly straightforward. The modern theme has a color theme where all colors are defined. If you have used a skeleton to build your own app, you do have a color theme as well extending the modern color theme. The only thing you have to do is to override the colors you want to be different. In your case, that would be "button-start" and "button-end". But be careful with such changes, that only works for browsers supporting the CSS3 stuff. The modern theme uses images as fallbacks which do, of course, not change their colors with that setting.
Regards,
Martin

Am 09.07.2011 um 23:46 schrieb Jonathan Wolfe:

Hi,

So, I thought this would be fairly straightforward, but I'm having a hard time overriding a buttons background css gradient colors.  The modern theme goes from a whitish color to dark grey for the 'button-css' property.  How do I set the from/to colors?  I perused the documentation, but couldn't get an example to work for me.  

Thanks for your help!
Jonathan




------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Override/Change Button Background Gradient Colors

Jonathan Wolfe
In reply to this post by Norbert Schröder
Thank you so much Norbert, that was just what I was looking for.  And Martin, that was also handy to know that images are used pre css3 :-)  Thanks again! I really appreciate it!

Jonathan

2011/7/10 Norbert Schröder <[hidden email]>
Hi Jonathan,

you can find a description of the gradient background decorator in the API
viewer under qx.ui.decoration.MLinearBackgroundGradient. The properties you
are looking for are "startColor" and "endColor". In the Modern theme's
"button-css" decorator the "startColor" is set to "button-start" and the
"endColor" to "button-end". The actual color values of "button-start" and
"button-end" are defined in
../framework/source/class/qx/theme/modern/Color.js and equate to "#F0F0F0"
and "#AFAFAF", respectively.

In your application you can easily modify any of the predefined colors of a
given theme by editing the file Color.js in your application's theme folder.
For example, you could add the following color definitons and replace
"#myStartColor" and "#myEndColor" with the colors of your choice:

"button-start" : "#myStartColor",
"button-end" : "#myEndColor"

Likewise you might want to modify your Decoration.js or even Appearance.js,
in order to fine-tune a specific decorator or a widget's overall appearance.

HTH,

 Norbert




Jonathan Wolfe wrote:
>
> Hi,
>
> So, I thought this would be fairly straightforward, but I'm having a hard
> time overriding a buttons background css gradient colors.  The modern
> theme
> goes from a whitish color to dark grey for the 'button-css' property.  How
> do I set the from/to colors?  I perused the documentation, but couldn't
> get
> an example to work for me.
>
> Thanks for your help!
> Jonathan
>
> *
>
> *
>
> ------------------------------------------------------------------------------
> All of the data generated in your IT infrastructure is seriously valuable.
> Why? It contains a definitive record of application performance, security
> threats, fraudulent activity, and more. Splunk takes this data and makes
> sense of it. IT sense. And common sense.
> http://p.sf.net/sfu/splunk-d2d-c2
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>


--
View this message in context: http://qooxdoo.678.n2.nabble.com/Override-Change-Button-Background-Gradient-Colors-tp6566488p6568087.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



--
Jonathan Wolfe |  Meteorologist  
Portland, OR National Weather Service
503-326-2420

Try the: Model Spectrum then tell me what you think!



------------------------------------------------------------------------------
All of the data generated in your IT infrastructure is seriously valuable.
Why? It contains a definitive record of application performance, security
threats, fraudulent activity, and more. Splunk takes this data and makes
sense of it. IT sense. And common sense.
http://p.sf.net/sfu/splunk-d2d-c2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel