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

How-To

Template Tips


This How-To discusses CSS fixes for template issues that affect ABPro displays.

To edit your CSS from within ABPro use ABPro Control Panel | Edit Files | Edit CSS tab. Add these changes to the end of the CSS file.

With Chrome you will need to use Ctl-F5 to refrsh the browser and load modified CSS (Chrome caches CSS)

 


Some templates do not allow the required field * to position beside the input and wrap it to the next line.

This looks odd and causes the labels to not align.

 

 

To remove the require field * you can add this to the end of the css file sv_apptpro.css

.sv_table_cell_value span{
    display:none;
}

Or, you could add some text to make it look more planned..

.sv_table_cell_value span:after{
    content:" Required Field";
}

To set the labels to align top add..

.sv_table_cell_name{
    vertical-align:top !important;
}

 

 

 


Another problem that shows up on some templates is the positioning of the date picker icon below the date.

 

 

 

And on the Simple Booking screen..

 

This CSS will help..

#datetime input{
    display: inline;
    margin:5px;
    margin-left:0px;
    position:relative;
    width:150px;
}

#display_grid_date {
    display: inline;
    margin:5px;
    margin-left:0px;
    position:relative;
    width:150px;
}

 

 

 


More..

Image placement in timeslots.

 

 


If you have issues that you are unable to figure out, please email me (This email address is being protected from spambots. You need JavaScript enabled to view it.) and I will try to give you a fix or workaround.

 

You may need to email me your template so I can setup a test here, and try to come up with CSS additions to solve your display issues.