You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Ronny Shibley <rs...@codefish.com> on 2014/09/26 10:31:53 UTC
DateField Styling
I'm stuck on styling the mx:DateField in a spark environment. I need to
round the edges change the calendar icon and remove the TextInput Shadow.
I tried every trick on google and can't seem to get it done. I feel very
stupid and i'm on the verge of creating my own component ! Please help !
Kind Regards,
Ronny Shibley, Eng
Software Architect | Codefish | www.codefish.com
t +961 5 450824 | m +961 70 250650
Re: DateField Styling
Posted by Ronny Shibley <rs...@codefish.com>.
Thank you very much ! Works like a charm as I already use FTE in my project
:)
Kind Regards,
Ronny Shibley, Eng
Software Architect | Codefish | www.codefish.com
t +961 5 450824 | m +961 70 250650
On Fri, Sep 26, 2014 at 1:28 PM, Jake Knerr <ja...@ardisialabs.com> wrote:
> Hi Ronny,
>
> If you can use FTE in your application, include or compile the
> MXFTEText.css stylesheet in your application described here:
>
> http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f-26a13bbf123c441239d-8000.html
> .
>
> Next, create a Spark TextInput skin with rounded corners. Let's assume you
> name it *SparkRoundedTextInputSkin.*
>
> Finally, in CSS set the MXFTETextInput class to use the skin you just
> created:
>
> *s|MXFTETextInput*
> *{*
> * skin-class: ClassReference("SparkRoundedTextInputSkin");*
> *}*
>
> I just tested this and it worked. The drop shadow was removed and the
> corners were rounded for a DateField UI component.
>
> - Jake
>
>
> On Fri, Sep 26, 2014 at 3:28 AM, Ronny Shibley <rs...@codefish.com>
> wrote:
>
> > Thank Jake Icon worked :)
> >
> > Unfortunately i had tried that link before regarding the rounded edges.
> no
> > luck !
> >
> > Kind Regards,
> >
> >
> > Ronny Shibley, Eng
> >
> >
> >
> > Software Architect | Codefish | www.codefish.com
> >
> > t +961 5 450824 | m +961 70 250650
> >
> >
> >
> > On Fri, Sep 26, 2014 at 11:54 AM, Jake Knerr <ja...@ardisialabs.com>
> wrote:
> >
> > > Hi Ronny,
> > >
> > > Here is a link that should help with the rounded edges:
> > >
> > >
> >
> http://stackoverflow.com/questions/2264876/rounding-the-corners-of-a-datefield-in-flex-4
> > >
> > > The CSS below should remove the drop shadow and change the calendar
> icon:
> > >
> > >
> > > *mx|DateField*
> > > *{*
> > > * disabledSkin: ClassReference(null);*
> > > * downSkin: ClassReference(null);*
> > > * upSkin: ClassReference(null);*
> > > * overSkin: ClassReference(null);*
> > > * skin: Embed("myNewIcon.png");*
> > > *}*
> > >
> > >
> > > On Fri, Sep 26, 2014 at 2:31 AM, Ronny Shibley <rs...@codefish.com>
> > > wrote:
> > >
> > > > I'm stuck on styling the mx:DateField in a spark environment. I need
> to
> > > > round the edges change the calendar icon and remove the TextInput
> > Shadow.
> > > >
> > > > I tried every trick on google and can't seem to get it done. I feel
> > very
> > > > stupid and i'm on the verge of creating my own component ! Please
> help
> > !
> > > >
> > > >
> > > > Kind Regards,
> > > >
> > > >
> > > > Ronny Shibley, Eng
> > > >
> > > >
> > > >
> > > > Software Architect | Codefish | www.codefish.com
> > > >
> > > > t +961 5 450824 | m +961 70 250650
> > > >
> > >
> > >
> > >
> > > --
> > > Jake Knerr - Flex Developer
> > > Ardisia Labs
> > > www.ardisialabs.com
> > >
> >
>
>
>
> --
> Jake Knerr - Flex Developer
> Ardisia Labs
> www.ardisialabs.com
>
Re: DateField Styling
Posted by Jake Knerr <ja...@ardisialabs.com>.
Hi Ronny,
If you can use FTE in your application, include or compile the
MXFTEText.css stylesheet in your application described here:
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f-26a13bbf123c441239d-8000.html
.
Next, create a Spark TextInput skin with rounded corners. Let's assume you
name it *SparkRoundedTextInputSkin.*
Finally, in CSS set the MXFTETextInput class to use the skin you just
created:
*s|MXFTETextInput*
*{*
* skin-class: ClassReference("SparkRoundedTextInputSkin");*
*}*
I just tested this and it worked. The drop shadow was removed and the
corners were rounded for a DateField UI component.
- Jake
On Fri, Sep 26, 2014 at 3:28 AM, Ronny Shibley <rs...@codefish.com>
wrote:
> Thank Jake Icon worked :)
>
> Unfortunately i had tried that link before regarding the rounded edges. no
> luck !
>
> Kind Regards,
>
>
> Ronny Shibley, Eng
>
>
>
> Software Architect | Codefish | www.codefish.com
>
> t +961 5 450824 | m +961 70 250650
>
>
>
> On Fri, Sep 26, 2014 at 11:54 AM, Jake Knerr <ja...@ardisialabs.com> wrote:
>
> > Hi Ronny,
> >
> > Here is a link that should help with the rounded edges:
> >
> >
> http://stackoverflow.com/questions/2264876/rounding-the-corners-of-a-datefield-in-flex-4
> >
> > The CSS below should remove the drop shadow and change the calendar icon:
> >
> >
> > *mx|DateField*
> > *{*
> > * disabledSkin: ClassReference(null);*
> > * downSkin: ClassReference(null);*
> > * upSkin: ClassReference(null);*
> > * overSkin: ClassReference(null);*
> > * skin: Embed("myNewIcon.png");*
> > *}*
> >
> >
> > On Fri, Sep 26, 2014 at 2:31 AM, Ronny Shibley <rs...@codefish.com>
> > wrote:
> >
> > > I'm stuck on styling the mx:DateField in a spark environment. I need to
> > > round the edges change the calendar icon and remove the TextInput
> Shadow.
> > >
> > > I tried every trick on google and can't seem to get it done. I feel
> very
> > > stupid and i'm on the verge of creating my own component ! Please help
> !
> > >
> > >
> > > Kind Regards,
> > >
> > >
> > > Ronny Shibley, Eng
> > >
> > >
> > >
> > > Software Architect | Codefish | www.codefish.com
> > >
> > > t +961 5 450824 | m +961 70 250650
> > >
> >
> >
> >
> > --
> > Jake Knerr - Flex Developer
> > Ardisia Labs
> > www.ardisialabs.com
> >
>
--
Jake Knerr - Flex Developer
Ardisia Labs
www.ardisialabs.com
Re: DateField Styling
Posted by Ronny Shibley <rs...@codefish.com>.
Thank Jake Icon worked :)
Unfortunately i had tried that link before regarding the rounded edges. no
luck !
Kind Regards,
Ronny Shibley, Eng
Software Architect | Codefish | www.codefish.com
t +961 5 450824 | m +961 70 250650
On Fri, Sep 26, 2014 at 11:54 AM, Jake Knerr <ja...@ardisialabs.com> wrote:
> Hi Ronny,
>
> Here is a link that should help with the rounded edges:
>
> http://stackoverflow.com/questions/2264876/rounding-the-corners-of-a-datefield-in-flex-4
>
> The CSS below should remove the drop shadow and change the calendar icon:
>
>
> *mx|DateField*
> *{*
> * disabledSkin: ClassReference(null);*
> * downSkin: ClassReference(null);*
> * upSkin: ClassReference(null);*
> * overSkin: ClassReference(null);*
> * skin: Embed("myNewIcon.png");*
> *}*
>
>
> On Fri, Sep 26, 2014 at 2:31 AM, Ronny Shibley <rs...@codefish.com>
> wrote:
>
> > I'm stuck on styling the mx:DateField in a spark environment. I need to
> > round the edges change the calendar icon and remove the TextInput Shadow.
> >
> > I tried every trick on google and can't seem to get it done. I feel very
> > stupid and i'm on the verge of creating my own component ! Please help !
> >
> >
> > Kind Regards,
> >
> >
> > Ronny Shibley, Eng
> >
> >
> >
> > Software Architect | Codefish | www.codefish.com
> >
> > t +961 5 450824 | m +961 70 250650
> >
>
>
>
> --
> Jake Knerr - Flex Developer
> Ardisia Labs
> www.ardisialabs.com
>
Re: DateField Styling
Posted by Jake Knerr <ja...@ardisialabs.com>.
Hi Ronny,
Here is a link that should help with the rounded edges:
http://stackoverflow.com/questions/2264876/rounding-the-corners-of-a-datefield-in-flex-4
The CSS below should remove the drop shadow and change the calendar icon:
*mx|DateField*
*{*
* disabledSkin: ClassReference(null);*
* downSkin: ClassReference(null);*
* upSkin: ClassReference(null);*
* overSkin: ClassReference(null);*
* skin: Embed("myNewIcon.png");*
*}*
On Fri, Sep 26, 2014 at 2:31 AM, Ronny Shibley <rs...@codefish.com>
wrote:
> I'm stuck on styling the mx:DateField in a spark environment. I need to
> round the edges change the calendar icon and remove the TextInput Shadow.
>
> I tried every trick on google and can't seem to get it done. I feel very
> stupid and i'm on the verge of creating my own component ! Please help !
>
>
> Kind Regards,
>
>
> Ronny Shibley, Eng
>
>
>
> Software Architect | Codefish | www.codefish.com
>
> t +961 5 450824 | m +961 70 250650
>
--
Jake Knerr - Flex Developer
Ardisia Labs
www.ardisialabs.com