Change Form Design – WP Site Auditor

You can change the form design easily using css.  Do Not edit the plugin file or it will be overwritten on next update.

There are a couple ways we recommend to edit the css.

1. Use a custom css plugin.
2. Use the css editor in your theme customizer.

Important to note, there are two form layouts, vertical and horizontal.  They each have their own shortcodes and css selectors.  You can copy and paste these codes below and change what you want.

Vertical Form

#audit-form {
width: 100%;
padding:25px;
background-color: #dbdbdb;
box-shadow: 5px 5px #888888;
}

#audit-form label {
display: block;
}

#audit-form input {
background-color:#fff;
}
#audit-form {
text-align: center;
}
#audit-form .loader {
padding: 0 !important;
margin: 0 auto;
display: block;
clear: both;
max-width: 150px;
}
#audit-form button {
color:#fff;
border:1px solid #000;
background-color:#1b75bc;
}

Horizontal Form

#audit-form {
width: 100%;
padding:25px;
background-color: #dbdbdb;
box-shadow: 5px 5px #888888;
}
#audit-form.horizontal .audit-form-field-wrapper,
#audit-form.horizontal button {
width: 100%;
max-width: 200px;
float: left;
padding: 0 5px;
}

form#audit-form.horizontal {
max-width: 820px;
overflow: auto;
padding: 10px;
margin: 0 auto;
}

#audit-form.horizontal button {
padding: 10px;
margin-top: 25px;
}

#audit-form label {
display: block;
}

#audit-form input {
background-color:#fff;
}
#audit-form {
text-align: center;
}
#audit-form .loader {
padding: 0 !important;
margin: 0 auto;
display: block;
clear: both;
max-width: 150px;
}
#audit-form button {
color:#fff;
border:1px solid #000;
background-color:#1b75bc;
}