APEX

Hi There.

It seems as if I can't change the look and feel of the calendar used in my APEX application.

I thought that it would work if I just changed the valiues for the classes Calendar, WeekCalendar and DayCalendar in my CSS file, but nothing seems to work in that way...

When I take a look at the application and specifically the calendars in Firefox, using FireBug and Web Developer, I don't see any of the classes I changed. But I do see the formRegionHeader etc.

I changed the CSS as following:

/*Calendars*/
.eServiceCalendarHolder{width:100%;}
.eServiceCalendarHolder .eServiceMonthTitle{font-weight:bold;text-align:center;font-size:15px;color:#7BCEEE; border:1px solid #CCCCCC;}
.eServiceCalendar {width:100%;background-color:#000000;}
.eServiceCalendar .eServiceDayOfWeek{padding:3px;background-color:#000000;border:1px solid #CCCCCC;border-top:none;}
.eServiceCalendar td{height:50px;width:14%;border:1px solid #CCCCCC;}
.eServiceCalendar .eServiceDayTitle{padding:2px;font-weight:bold;text-align:right;float:right;border:#CCCCCC 1px solid;border-right:none;border-top:none;background-color:#000000;}
.eServiceCalendar .eServiceDay{vertical-align:top;}
.eServiceCalendar .eServiceNonDayTitle{text-align:right;color:#7BCEEE;font-weight:bold;}
.eServiceCalendar .eServiceNonDay{background-color:#000000;}
.eServiceCalendar .eServiceWeekendDayTitle{padding:2px;text-align:right;color:#7BCEEE;font-weight:bold;text-align:right;float:right;border:1px solid #CCCCCC;border-right:none;border-top:none;text-align:right;color:#7BCEEE;}
.eServiceCalendar .eServiceWeekendDay{}
.eServiceCalendar .eServiceToday{vertical-align:top;border:#CCCCCC 1px solid;background-color:#000000;}
.eServiceCalendar .eServiceToday .eServiceDayTitle{background-color:#000000;}

/* Standard Weekly Calendar */
.eServiceWeekCalendarHolder{width:100%;}
.eServiceWeekCalendarHolder .eServiceMonthTitle{font-weight:bold;text-align:center;font-size:15px;color:#7BCEEE; border:1px solid #CCCCCC;}
.eServiceWeekCalendar {width:100%;background-color:#000000;}
.eServiceWeekCalendar .eServiceDayOfWeek{padding:3px;background-color:#000000;border:1px solid #CCCCCC;border-top:none;}
.eServiceWeekCalendar td{height:25px;width:12%;border:1px solid #CCCCCC;}
.eServiceWeekCalendar .eServiceDayTitle{padding:2px;font-weight:bold;text-align:right;float:right;border:#CCCCCC 1px solid;border-right:none;border-top:none;background-color:#000000;}
.eServiceWeekCalendar .eServiceDay{height:25px;width:12%;vertical-align:top;}
.eServiceWeekCalendar .eServiceNonDayTitle{text-align:right;color:#7BCEEE;font-weight:bold;}
.eServiceWeekCalendar .eServiceNonDay{background-color:#000000;}
.eServiceWeekCalendar .eServiceToday{height:25px;width:12%;vertical-align:top;border-right:#CCCCCC 1px solid;border-left:#CCCCCC 1px solid;border-bottom:#CCCCCC 1px solid;background-color:#000000;}
.eServiceWeekCalendar .eServiceToday .eServiceDayTitle{background-color:#000000;}
.eServiceWeekCalendar .eServiceHour {width:50px;padding:3px;border:1px solid #CCCCCC;background-color:#000000;}
.eServiceWeekCalendar .eServiceHourTitle {width:50px;border:1px;padding:3px;background-color:#000000;}

/* Standard Daily Calendar */

.eServiceDayCalendarHolder{width:100%;}
.eServiceDayCalendarHolder .eServiceMonthTitle{font-weight:bold;text-align:center;font-size:15px;color:#7BCEEE; border:1px solid #CCCCCC;}
.eServiceDayCalendar {width:100%;background-color:#000000;}
.eServiceDayCalendar .eServiceDayOfWeek{{padding:3px;background-color:#000000;border:1px solid #CCCCCC;border-top:none;}
.eServiceDayCalendar td{height:25px;width:84%;border:1px solid #CCCCCC;}
.eServiceDayCalendar .eServiceDayTitle{padding:2px;font-weight:bold;text-align:right;float:right;border:#CCCCCC 1px solid;border-right:none;border-top:none;background-color:#000000;}
.eServiceDayCalendar .eServiceDay{height:25px;width:84%;vertical-align:top;}
.eServiceDayCalendar .eServiceToday{height:25px;width:84%;vertical-align:top;border-right:#CCCCCC 1px solid;border-left:#CCCCCC 1px solid;border-bottom:#CCCCCC 1px solid;background-color:#000000;}
.eServiceDayCalendar .eServiceToday .eServiceDayTitle{background-color:#000000;}
.eServiceDayCalendar .eServiceHour {width:50px;padding:3px;border:1px solid #CCCCCC;background-color:#000000;}
.eServiceDayCalendar .eServiceHourTitle {width:50px;padding:3px;background-color:#000000;}

Can anyone tell me what I did wrong?

Oh, by the way: I just got myself a copy of Theme 4 and changed stuff....

Regards,

Douwe Pieter van den Bos

http://ome-b.nl