Hi, I used this css as is (although I did change the background colour to match my site. however... I'm using the dat picker on a field displayed in a jquerydialog. the datepicket pops up - behind the dialog box. I think the z-indexvalue needs bumping up (or is it down?)
Looks good tho :O) On Sep 7, 7:23 am, annet <[email protected]> wrote: > Hi David, > > I didn't like the calendar that comes with web2py, not for its > functionality but for its appearance. Instead of replacing it I just > restyled it: > > .calendar { > cursor: default; > background-color: #FFFFFF; > color: #444444; > font-size: 11px; > border: 1px solid #AAAAAA; > border-radius: 6px; > -webkit-border-radius: 6px; > -moz-border-radius: 6px; > padding: 6px;} > > .calendar table { > border-collapse: separate; > border-spacing: 2px;} > > .calendar thead {} > .calendar thead tr, .calendar thead .headrow { > background-color: #4169E1; > color: #444444;} > > .calendar thead .daynames {} > .calendar .button, .calendar thead .title { > color: #FFFFFF; > font-size: 12px; > text-align: center; > padding: 3px;} > > .calendar thead tr .hilite, .calendar thead tr .active, .calendar > thead .headrow .hilite, .calendar thead .headrow .active { > background-color: #FFFFFF; > color: #4169E1; > padding: 3px;} > > .calendar thead .daynames .hilite, .calendar thead .daynames .active { > background-color: #FFFFFF; > color: #444444;} > > .calendar thead .name { > background-color: #FFFFFF; > text-align: center; > padding: 3px;} > > .calendar tbody {} > .calendar tbody td { > text-align: right; > border: 1px solid #AAAAAA;} > > .calendar tbody td.hilite { > background-color: #777777; > color: #FFFFFF;} > > .calendar tbody td.active, .calendar tbody td.selected { > font-weight: bold; > background-color: #FFFFFF; > color: #4169E1;} > > .calendar tbody td.today { > font-weight: bold; > background-color: #4169E1; > color: #FFFFFF;} > > .calendar tbody .disabled { > color: #777777;} > > .calendar tbody .emptycell { > visibility: hidden;} > > .calendar tbody .emptyrow { > display: none;} > > .calendar tfoot .ttip { > background-color: #777777; > color: #FFFFFF; > text-align: center; > border: 1px solid #333333; > padding: 1px;} > > .calendar tfoot .hilite { > padding: 1px; > background-color: > #EEEEEE;} > > .calendar tfoot .active { > padding: 2px 0px 0px 2px;} > > .calendar .combo { > background-color: #FFFFFF; > position: absolute; > display: none; > width: 4em; > top: 0px; > left: 0px; > cursor: default; > border: 1px solid #DDDDDD; > padding: 1px; > z-index: 100;} > > .calendar .combo .label, .calendar .combo .label-IEfix { > text-align: center; > padding: 1px;} > > .calendar .combo .label-IEfix { > width: 4em;} > > .calendar .combo .active { > background-color: #CCCCCC; > color: #FFFFFF; > padding: 0px;} > > .calendar .combo .hilite { > background-color: #777777; > color: #FFFFFF;} > > .floatleft { > float: left;} > > .CP_over { > background-color: #FFFFFF > } > > Just another option ;-) > > Kind regards, > > Annet.
