Notice: ABPro's Stripe payment processor uses the Legacy Checkout and is not SCA compatible. read more..


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;
    -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..






If you are running with Time on Y-Axis there are classes to match the above, just add _timeony to the end like..



 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.