WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: seanie_morris on February 05, 2017, 01:23:48 PM
-
Don't shoot me for asking this, as I just can't find where I can edit the customer details/address form on the checkout phase!
I would like to edit the form. I have 2 things that I want to try.
1. Change the order of the fields as they are called (the main one bringing the Zip/Postcode field towards the bottom of the fields list).
2. Change around the cell padding, alignment (and more) of the labels (Name, Email, Address, etc. etc.).
The template I am using (Overdrive) does have a set of CSS rules in style.css for forms, which look like this:
.form input, .form textarea, .form select {
border: 1px solid #000000;
color: #333333;
font-weight: bold;
margin-top: 14px;
}
.form textarea, .form select {
width: 50.4%;
}
.form select {
width: 50%;
}
.form input:focus, .form textarea:focus, .form select:focus {
background-color: #E7F1FE;
border: 1px solid #C4DCFC;
color: #294403;
}
.form input:hover, .form textarea:hover, .form select:hover {
background-color: #E9EDF1;
border: 1px solid #C2C4C6;
color: #333333;
}
.form input[type="text"] {
height: 27px;
padding: 0 0 0 4px;
width: 50%;
}
.form input[type="submit"], .form input[type="reset"] {
background: none repeat scroll 0 0 #035B8B;
border: 1px solid #024366;
color: #FFFFFF;
float: left;
height: 40px;
padding: 9px;
}
.form input[type="submit"]:hover, .form input[type="reset"]:hover {
background: none repeat scroll 0 0 #024366;
border: 1px solid #024366;
color: #FFFFFF;
}
.form input[type="radio"], .form input[type="checkbox"] {
background-image: none;
border: 0 none;
}
.form td.field_title {
width: 150px;
}
And while I have tried altering the .form td variations, I can get the fields on the checkout form to appear as I want them (or changed at all, actually), like in the image attached (showing how there is no padding between field label and field input).
Can someone point me in the right direction?
Seanie.
-
1.
General Settings > Shop Settings > Address Form > ZIP at End of Address
2.
Every table row has its own id like #cust_email_text, the table cells have classes like .mod_bakery_form_label_f and the input fields have classes like .mod_bakery_form_input_f. So it is easy to select any address form element. Just have a look into the html output of Bakery. Further reading:
http://www.bakery-shop.ch/#css
-
1.
General Settings > Shop Settings > Address Form > ZIP at End of Address
2.
Every table row has its own id like #cust_email_text, the table cells have classes like .mod_bakery_form_label_f and the input fields have classes like .mod_bakery_form_input_f. So it is easy to select any address form element. Just have a look into the html output of Bakery. Further reading:
http://www.bakery-shop.ch/#css
1. General Settings > Shop Settings > Address Form > ZIP at End of Address
Saw that, didn't think it was THAT easy! :D Thank you.
2. the table cells have classes like .mod_bakery_form_label_f and the input fields have classes like .mod_bakery_form_input_f.
That's what I was changing but the changes had no effect (in /bakery/frontend.css). So, I deleted the cache from my browser, tried again, and now it's working.
:-)