Different images for timeslots
The image for available and booked slots are set in the GAD Setup screen.
If you want to have different images for each state: 'available', 'selected', 'booked', 'pending', etc., you can use CSS.
First set the GAD Setup images to "no_image.png" so the slots will not show any images.
Now edit the css file (sv_apptpro.css) and add background images there.
Example, for 'available' slots:
.sv_gad_timeslot_available {
display: inline;
border:solid;
border-width:1px;
border-color:#33CC00;
background-color:#CCFFCC;
height:20px;
padding:1px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 5px;
background-image: url("/pumpkin-icon2.png");
background-repeat: no-repeat;
background-position: center center;
}
Others you may wish to change..
.sv_gad_timeslot_booked
.sv_gad_timeslot_pending
.sv_gad_timeslot_book-off
.sv_gad_timeslot_selected
If you are running with Time on Y-Axis there are classes to match the above, just add _timeony to the end like..
.sv_gad_timeslot_available_timeony
CSS can be edited from within ABPro: Control Panel | Edit Files | Edit CSS.
NOTE: This only works if you are not displaying text (seat counts or description) in your timeslots.