---

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.