---

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.