You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by "wicket@geofflancaster.com" <wi...@geofflancaster.com> on 2010/02/02 21:07:18 UTC

DatePicker css

Is it possible to edit the datepicker css? the datepicker is displaying
behind some other components on my page and i'd like to set the z-index so
it display on top of everything.

--------------------------------------------------------------------
mail2web - Check your email from the web at
http://link.mail2web.com/mail2web



---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: DatePicker css

Posted by nino martinez wael <ni...@gmail.com>.
Stefan

I have sucessful done this (it's a long time since though, so could have
changed),

but had to :

#myclass  .yui-skin-sam .yui-calendar td.calcell.today a {
               background-color : #mycolor;
       }



http://developer.yahoo.com/yui/examples/calendar/calskin.html

Otherwise if some one had a quickstart.. I might be stubborn enough to show
how I did, we could then also determine if it still works...

2010/2/3 Stefan Lindner <li...@visionet.de>

> Hi nino,
>
> no it did not work. My Firebug tells me that the css rules of datepicker's
> css are always allied AFTER my css rules. Even if my CSS is the last one in
> header section.
> I was able to customize some things where no explicit rules are defined in
> datepicker's CSS but I was unable to e.g. change the background of today's
> box rule
>
>        .yui-skin-sam .yui-calendar td.calcell.today a {
>                background-color : #mycolor;
>         }
>
> Stefan
>
> -----Ursprüngliche Nachricht-----
> Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> Gesendet: Mittwoch, 3. Februar 2010 11:13
> An: users@wicket.apache.org
> Betreff: Re: DatePicker css
>
> but you should still be able todo it via class's
>
> <div class="container"><div class="datepicker"></div> </div>
>
> container datepicker{
> color:red;
> }
>
> should work and should override:
>
> datepicker{
> color:blue;
> }
>
> Something like that.
>
>
>
> 2010/2/3 Stefan Lindner <li...@visionet.de>
>
> > That did not work in my case. Yes, it's normal CSS but it is applied in
> an
> > unusal way through the internal styling mechanism of yui. This means that
> a
> > css rule defined at the end of the <head> section i.e. the last css rule
> at
> > all does not override a css rule in the internal css of YUI-DatePicker
> from
> > wicket-datetime package.
> >
> > Stefan
> >
> > -----Ursprüngliche Nachricht-----
> > Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> > Gesendet: Mittwoch, 3. Februar 2010 09:51
> > An: users@wicket.apache.org
> > Betreff: Re: DatePicker css
> >
> > it's just ordinary css, so you should be able to override it. Try using
> > firebug and change the css there. Then make a new css and apply that :)
> >
> > 2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>
> >
> > > Lol.. let me know if you find a good trick for that. We worked around
> > > it by changing the surroundings' relative properties.
> > >
> > > **
> > > Martin
> > >
> > > 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > > > Is it possible to edit the datepicker css? the datepicker is
> displaying
> > > > behind some other components on my page and i'd like to set the
> z-index
> > > so
> > > > it display on top of everything.
> > > >
> > > > --------------------------------------------------------------------
> > > > mail2web - Check your email from the web at
> > > > http://link.mail2web.com/mail2web
> > > >
> > > >
> > > >
> > > > ---------------------------------------------------------------------
> > > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > > For additional commands, e-mail: users-help@wicket.apache.org
> > > >
> > > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: DatePicker css

Posted by PDiefent <pd...@csc.com>.
Hi,
I also have a problem with the date picker CSS. The columns in the calendars
GUI always resize according to the column width of the table in the
background of the calendar GUI.
Is it possible to isolate the calendar in a separate layer/div where no
resizing of the calendar columns take place?
Thanks, Peter
-- 
View this message in context: http://apache-wicket.1842946.n4.nabble.com/DatePicker-css-tp1844715p2298194.html
Sent from the Wicket - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: DatePicker css

Posted by Mauro Ciancio <ma...@gmail.com>.
Hello,

On Wed, Apr 28, 2010 at 3:58 PM, shetc <sh...@bellsouth.net> wrote:
> Stefan -- please show me what the trick was. Thanks, Steve

I came across with this thread and saved me hours!

I wanted to change the background for the month/year selector.
Using this snippet worked great:

.yui-skin-sam .yui-calendar .calheader {
   background-color : white !important;
}

Regards.
-- 
Mauro Ciancio

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


RE: DatePicker css

Posted by shetc <sh...@bellsouth.net>.
Stefan -- please show me what the trick was. Thanks, Steve
-- 
View this message in context: http://apache-wicket.1842946.n4.nabble.com/DatePicker-css-tp1844715p2073801.html
Sent from the Wicket - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


RE: DatePicker css

Posted by Stefan Lindner <li...@visionet.de>.
Ah! Thanks Anantha, thanks nino!

That's the trick!

I love the wicket mailing list!

Stefan

-----Ursprüngliche Nachricht-----
Von: Anantha Kumaran [mailto:ananthakumaran@gmail.com] 
Gesendet: Mittwoch, 3. Februar 2010 11:51
An: users
Betreff: Re: DatePicker css

this may work

 .yui-skin-sam .yui-calendar td.calcell.today a {
               background-color : #mycolor !important;
       }

On Wed, Feb 3, 2010 at 2:32 AM, Stefan Lindner <li...@visionet.de> wrote:

> Hi nino,
>
> no it did not work. My Firebug tells me that the css rules of datepicker's
> css are always allied AFTER my css rules. Even if my CSS is the last one in
> header section.
> I was able to customize some things where no explicit rules are defined in
> datepicker's CSS but I was unable to e.g. change the background of today's
> box rule
>
>        .yui-skin-sam .yui-calendar td.calcell.today a {
>                background-color : #mycolor;
>         }
>
> Stefan
>
> -----Ursprüngliche Nachricht-----
> Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> Gesendet: Mittwoch, 3. Februar 2010 11:13
> An: users@wicket.apache.org
> Betreff: Re: DatePicker css
>
> but you should still be able todo it via class's
>
> <div class="container"><div class="datepicker"></div> </div>
>
> container datepicker{
> color:red;
> }
>
> should work and should override:
>
> datepicker{
> color:blue;
> }
>
> Something like that.
>
>
>
> 2010/2/3 Stefan Lindner <li...@visionet.de>
>
> > That did not work in my case. Yes, it's normal CSS but it is applied in
> an
> > unusal way through the internal styling mechanism of yui. This means that
> a
> > css rule defined at the end of the <head> section i.e. the last css rule
> at
> > all does not override a css rule in the internal css of YUI-DatePicker
> from
> > wicket-datetime package.
> >
> > Stefan
> >
> > -----Ursprüngliche Nachricht-----
> > Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> > Gesendet: Mittwoch, 3. Februar 2010 09:51
> > An: users@wicket.apache.org
> > Betreff: Re: DatePicker css
> >
> > it's just ordinary css, so you should be able to override it. Try using
> > firebug and change the css there. Then make a new css and apply that :)
> >
> > 2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>
> >
> > > Lol.. let me know if you find a good trick for that. We worked around
> > > it by changing the surroundings' relative properties.
> > >
> > > **
> > > Martin
> > >
> > > 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > > > Is it possible to edit the datepicker css? the datepicker is
> displaying
> > > > behind some other components on my page and i'd like to set the
> z-index
> > > so
> > > > it display on top of everything.
> > > >
> > > > --------------------------------------------------------------------
> > > > mail2web - Check your email from the web at
> > > > http://link.mail2web.com/mail2web
> > > >
> > > >
> > > >
> > > > ---------------------------------------------------------------------
> > > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > > For additional commands, e-mail: users-help@wicket.apache.org
> > > >
> > > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>


-- 
----
Anantha Kumaran

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: DatePicker css

Posted by Anantha Kumaran <an...@gmail.com>.
this may work

 .yui-skin-sam .yui-calendar td.calcell.today a {
               background-color : #mycolor !important;
       }

On Wed, Feb 3, 2010 at 2:32 AM, Stefan Lindner <li...@visionet.de> wrote:

> Hi nino,
>
> no it did not work. My Firebug tells me that the css rules of datepicker's
> css are always allied AFTER my css rules. Even if my CSS is the last one in
> header section.
> I was able to customize some things where no explicit rules are defined in
> datepicker's CSS but I was unable to e.g. change the background of today's
> box rule
>
>        .yui-skin-sam .yui-calendar td.calcell.today a {
>                background-color : #mycolor;
>         }
>
> Stefan
>
> -----Ursprüngliche Nachricht-----
> Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> Gesendet: Mittwoch, 3. Februar 2010 11:13
> An: users@wicket.apache.org
> Betreff: Re: DatePicker css
>
> but you should still be able todo it via class's
>
> <div class="container"><div class="datepicker"></div> </div>
>
> container datepicker{
> color:red;
> }
>
> should work and should override:
>
> datepicker{
> color:blue;
> }
>
> Something like that.
>
>
>
> 2010/2/3 Stefan Lindner <li...@visionet.de>
>
> > That did not work in my case. Yes, it's normal CSS but it is applied in
> an
> > unusal way through the internal styling mechanism of yui. This means that
> a
> > css rule defined at the end of the <head> section i.e. the last css rule
> at
> > all does not override a css rule in the internal css of YUI-DatePicker
> from
> > wicket-datetime package.
> >
> > Stefan
> >
> > -----Ursprüngliche Nachricht-----
> > Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> > Gesendet: Mittwoch, 3. Februar 2010 09:51
> > An: users@wicket.apache.org
> > Betreff: Re: DatePicker css
> >
> > it's just ordinary css, so you should be able to override it. Try using
> > firebug and change the css there. Then make a new css and apply that :)
> >
> > 2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>
> >
> > > Lol.. let me know if you find a good trick for that. We worked around
> > > it by changing the surroundings' relative properties.
> > >
> > > **
> > > Martin
> > >
> > > 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > > > Is it possible to edit the datepicker css? the datepicker is
> displaying
> > > > behind some other components on my page and i'd like to set the
> z-index
> > > so
> > > > it display on top of everything.
> > > >
> > > > --------------------------------------------------------------------
> > > > mail2web - Check your email from the web at
> > > > http://link.mail2web.com/mail2web
> > > >
> > > >
> > > >
> > > > ---------------------------------------------------------------------
> > > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > > For additional commands, e-mail: users-help@wicket.apache.org
> > > >
> > > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>


-- 
----
Anantha Kumaran

RE: DatePicker css

Posted by Stefan Lindner <li...@visionet.de>.
Hi nino,

no it did not work. My Firebug tells me that the css rules of datepicker's css are always allied AFTER my css rules. Even if my CSS is the last one in header section.
I was able to customize some things where no explicit rules are defined in datepicker's CSS but I was unable to e.g. change the background of today's box rule

	.yui-skin-sam .yui-calendar td.calcell.today a {
		background-color : #mycolor;
	}

Stefan

-----Ursprüngliche Nachricht-----
Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com] 
Gesendet: Mittwoch, 3. Februar 2010 11:13
An: users@wicket.apache.org
Betreff: Re: DatePicker css

but you should still be able todo it via class's

<div class="container"><div class="datepicker"></div> </div>

container datepicker{
color:red;
}

should work and should override:

datepicker{
color:blue;
}

Something like that.



2010/2/3 Stefan Lindner <li...@visionet.de>

> That did not work in my case. Yes, it's normal CSS but it is applied in an
> unusal way through the internal styling mechanism of yui. This means that a
> css rule defined at the end of the <head> section i.e. the last css rule at
> all does not override a css rule in the internal css of YUI-DatePicker from
> wicket-datetime package.
>
> Stefan
>
> -----Ursprüngliche Nachricht-----
> Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> Gesendet: Mittwoch, 3. Februar 2010 09:51
> An: users@wicket.apache.org
> Betreff: Re: DatePicker css
>
> it's just ordinary css, so you should be able to override it. Try using
> firebug and change the css there. Then make a new css and apply that :)
>
> 2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>
>
> > Lol.. let me know if you find a good trick for that. We worked around
> > it by changing the surroundings' relative properties.
> >
> > **
> > Martin
> >
> > 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > > Is it possible to edit the datepicker css? the datepicker is displaying
> > > behind some other components on my page and i'd like to set the z-index
> > so
> > > it display on top of everything.
> > >
> > > --------------------------------------------------------------------
> > > mail2web - Check your email from the web at
> > > http://link.mail2web.com/mail2web
> > >
> > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: DatePicker css

Posted by nino martinez wael <ni...@gmail.com>.
but you should still be able todo it via class's

<div class="container"><div class="datepicker"></div> </div>

container datepicker{
color:red;
}

should work and should override:

datepicker{
color:blue;
}

Something like that.



2010/2/3 Stefan Lindner <li...@visionet.de>

> That did not work in my case. Yes, it's normal CSS but it is applied in an
> unusal way through the internal styling mechanism of yui. This means that a
> css rule defined at the end of the <head> section i.e. the last css rule at
> all does not override a css rule in the internal css of YUI-DatePicker from
> wicket-datetime package.
>
> Stefan
>
> -----Ursprüngliche Nachricht-----
> Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com]
> Gesendet: Mittwoch, 3. Februar 2010 09:51
> An: users@wicket.apache.org
> Betreff: Re: DatePicker css
>
> it's just ordinary css, so you should be able to override it. Try using
> firebug and change the css there. Then make a new css and apply that :)
>
> 2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>
>
> > Lol.. let me know if you find a good trick for that. We worked around
> > it by changing the surroundings' relative properties.
> >
> > **
> > Martin
> >
> > 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > > Is it possible to edit the datepicker css? the datepicker is displaying
> > > behind some other components on my page and i'd like to set the z-index
> > so
> > > it display on top of everything.
> > >
> > > --------------------------------------------------------------------
> > > mail2web - Check your email from the web at
> > > http://link.mail2web.com/mail2web
> > >
> > >
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > For additional commands, e-mail: users-help@wicket.apache.org
> > >
> > >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

RE: DatePicker css

Posted by Stefan Lindner <li...@visionet.de>.
That did not work in my case. Yes, it's normal CSS but it is applied in an unusal way through the internal styling mechanism of yui. This means that a css rule defined at the end of the <head> section i.e. the last css rule at all does not override a css rule in the internal css of YUI-DatePicker from wicket-datetime package.

Stefan

-----Ursprüngliche Nachricht-----
Von: nino martinez wael [mailto:nino.martinez.wael@gmail.com] 
Gesendet: Mittwoch, 3. Februar 2010 09:51
An: users@wicket.apache.org
Betreff: Re: DatePicker css

it's just ordinary css, so you should be able to override it. Try using
firebug and change the css there. Then make a new css and apply that :)

2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>

> Lol.. let me know if you find a good trick for that. We worked around
> it by changing the surroundings' relative properties.
>
> **
> Martin
>
> 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > Is it possible to edit the datepicker css? the datepicker is displaying
> > behind some other components on my page and i'd like to set the z-index
> so
> > it display on top of everything.
> >
> > --------------------------------------------------------------------
> > mail2web - Check your email from the web at
> > http://link.mail2web.com/mail2web
> >
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: DatePicker css

Posted by nino martinez wael <ni...@gmail.com>.
it's just ordinary css, so you should be able to override it. Try using
firebug and change the css there. Then make a new css and apply that :)

2010/2/2 Martin Makundi <ma...@koodaripalvelut.com>

> Lol.. let me know if you find a good trick for that. We worked around
> it by changing the surroundings' relative properties.
>
> **
> Martin
>
> 2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> > Is it possible to edit the datepicker css? the datepicker is displaying
> > behind some other components on my page and i'd like to set the z-index
> so
> > it display on top of everything.
> >
> > --------------------------------------------------------------------
> > mail2web - Check your email from the web at
> > http://link.mail2web.com/mail2web
> >
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > For additional commands, e-mail: users-help@wicket.apache.org
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: DatePicker css

Posted by Martin Makundi <ma...@koodaripalvelut.com>.
Lol.. let me know if you find a good trick for that. We worked around
it by changing the surroundings' relative properties.

**
Martin

2010/2/2 wicket@geofflancaster.com <wi...@geofflancaster.com>:
> Is it possible to edit the datepicker css? the datepicker is displaying
> behind some other components on my page and i'd like to set the z-index so
> it display on top of everything.
>
> --------------------------------------------------------------------
> mail2web - Check your email from the web at
> http://link.mail2web.com/mail2web
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org