Checkout CSS

My client doesn't like the styling on the checkout page he thinks it's has too much wasted space and the page is to long. Which css file is used for the styling of the text fields and pull down menus. I want to tighten the page up so that it will all fit on the screen. If a customer makes a mistake at the top of the page when they click the checkout button on the bottom of the page it does show the validation error but if the error is at the top so it is off the screen so the customers are getting frustrated and leaving because the don't know what is wrong.

look in:
webassist/themes/<your theme>/css/default_form.css

and:
webassist/themes/<your theme>/css/configurable.css


where <your theme> is the name of the design you are using in the design manager.

Thanks,
That helped I've also tightened up the form and made the expire month and year menu items but now the validation is working correctly. Here is the code can you see where I might have made a mistake because I can't see it. It acts as though nothing has been entered. And gives me the error message but instead of red its black.

Expiration Month:</strong>
<span id="sprytextfield3">
<span class="fieldGroup">
<select name="cc_type" id="exp_month" onBlur="if (document.getElementById('cc_typeServerValidation')) document.getElementById('cc_typeServerValidation').style.display='none';" >
<option value="" <?php if (!(strcmp("", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>Choose Expire Month</option>
<option value="01" <?php if (!(strcmp("01", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>January</option>
<option value="02" <?php if (!(strcmp("02", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>February</option>
<option value="03" <?php if (!(strcmp("03", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>March</option>
<option value="04" <?php if (!(strcmp("04", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>April</option>
<option value="05" <?php if (!(strcmp("05", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>May</option>
<option value="06" <?php if (!(strcmp("06", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>June</option>
<option value="07" <?php if (!(strcmp("07", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>July</option>
<option value="08" <?php if (!(strcmp("08", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>August</option>
<option value="09" <?php if (!(strcmp("09", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>September</option>
<option value="10" <?php if (!(strcmp("10", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>October</option>
<option value="11" <?php if (!(strcmp("11", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>November</option>
<option value="12" <?php if (!(strcmp("12", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>December</option>
</select>
<span class="textfieldRequiredMsg">Please enter a valid two-digit month.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Please enter a valid two-digit month.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span><span class="textfieldMaxValueMsg">The entered value is greater than the maximum allowed.</span>
<?php
if (ValidatedField("confirm","confirm")) {
if ((strpos((",".ValidatedField("confirm","confirm").","), "," . "9" . ",") !== false || "9" == "")) {
if (!(false)) {
?>
<span class="textfieldServerError" id="exp_monthServerValidation">
Please choose a month.
</span>
<?php //WAFV_Conditional confirm.php confirm(9:)
}
}
}?>
</span>
</span>
<strong>Expiration Year:</strong>
<span id="sprytextfield4">
<span class="fieldGroup">
<select name="cc_type" id="exp_year" onBlur="if (document.getElementById('cc_typeServerValidation')) document.getElementById('cc_typeServerValidation').style.display='none';" >
<option value="" <?php if (!(strcmp("", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>Choose Expire Year</option>
<option value="2011" <?php if (!(strcmp("2011", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2011</option>
<option value="2012" <?php if (!(strcmp("2012", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2012</option>
<option value="2013" <?php if (!(strcmp("2013", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2013</option>
<option value="2014" <?php if (!(strcmp("2014", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2014</option>
<option value="2015" <?php if (!(strcmp("2015", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2015</option>
<option value="2016" <?php if (!(strcmp("2016", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2016</option>
<option value="2017" <?php if (!(strcmp("2017", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2017</option>
<option value="2018" <?php if (!(strcmp("2018", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2018</option>
<option value="2019" <?php if (!(strcmp("2019", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2019</option>
<option value="2020" <?php if (!(strcmp("2020", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2020</option>
</select>
<span class="textfieldRequiredMsg">Please enter a valid four-digit year.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Please enter a valid four-digit year.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span>
<?php
if (ValidatedField("confirm","confirm")) {
if ((strpos((",".ValidatedField("confirm","confirm").","), "," . "10" . ",") !== false || "10" == "")) {
if (!(false)) {
?>
<span class="textfieldServerError" id="exp_yearServerValidation">
Please choose a year.
</span>
<?php //WAFV_Conditional confirm.php confirm(10:)
}
}
}?>
</span>
</span>

you have named both the month and year select list as cc_type:
<select name="cc_type" id="exp_month"


and:
<select name="cc_type" id="exp_year"


you need to change the name along with the ID

Thanks, that allowed the form to accept the data but if the month or year are not chosen its not showing the error message correctly its not bold or red.


Expiration Month:</strong>
<span id="sprytextfield3">
<span class="fieldGroup">
<select name="exp_month" id="exp_month" onBlur="if (document.getElementById('cc_typeServerValidation')) document.getElementById('cc_typeServerValidation').style.display='none';" >
<option value="" <?php if (!(strcmp("", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>Choose Expire Month</option>
<option value="01" <?php if (!(strcmp("01", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>January</option>
<option value="02" <?php if (!(strcmp("02", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>February</option>
<option value="03" <?php if (!(strcmp("03", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>March</option>
<option value="04" <?php if (!(strcmp("04", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>April</option>
<option value="05" <?php if (!(strcmp("05", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>May</option>
<option value="06" <?php if (!(strcmp("06", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>June</option>
<option value="07" <?php if (!(strcmp("07", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>July</option>
<option value="08" <?php if (!(strcmp("08", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>August</option>
<option value="09" <?php if (!(strcmp("09", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>September</option>
<option value="10" <?php if (!(strcmp("10", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>October</option>
<option value="11" <?php if (!(strcmp("11", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>November</option>
<option value="12" <?php if (!(strcmp("12", (ValidatedField("confirm","exp_month"))))) {echo "selected=\"selected\"";} ?>>December</option>
</select>
<span class="textfieldRequiredMsg">Please enter a valid two-digit month.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Please enter a valid two-digit month.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span><span class="textfieldMaxValueMsg">The entered value is greater than the maximum allowed.</span>
<?php
if (ValidatedField("confirm","confirm")) {
if ((strpos((",".ValidatedField("confirm","confirm").","), "," . "9" . ",") !== false || "9" == "")) {
if (!(false)) {
?>
<span class="textfieldServerError" id="exp_monthServerValidation">
Please choose a month.
</span>
<?php //WAFV_Conditional confirm.php confirm(9:)
}
}
}?>
</span>
</span>
<strong>Expiration Year:</strong>
<span id="sprytextfield4">
<span class="fieldGroup">
<select name="exp_year" id="exp_year" onBlur="if (document.getElementById('cc_typeServerValidation')) document.getElementById('cc_typeServerValidation').style.display='none';" >
<option value="" <?php if (!(strcmp("", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>Choose Expire Year</option>
<option value="2011" <?php if (!(strcmp("2011", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2011</option>
<option value="2012" <?php if (!(strcmp("2012", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2012</option>
<option value="2013" <?php if (!(strcmp("2013", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2013</option>
<option value="2014" <?php if (!(strcmp("2014", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2014</option>
<option value="2015" <?php if (!(strcmp("2015", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2015</option>
<option value="2016" <?php if (!(strcmp("2016", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2016</option>
<option value="2017" <?php if (!(strcmp("2017", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2017</option>
<option value="2018" <?php if (!(strcmp("2018", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2018</option>
<option value="2019" <?php if (!(strcmp("2019", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2019</option>
<option value="2020" <?php if (!(strcmp("2020", (ValidatedField("confirm","exp_year"))))) {echo "selected=\"selected\"";} ?>>2020</option>
</select>
<span class="textfieldRequiredMsg">Please enter a valid four-digit year.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Please enter a valid four-digit year.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span>
<?php
if (ValidatedField("confirm","confirm")) {
if ((strpos((",".ValidatedField("confirm","confirm").","), "," . "10" . ",") !== false || "10" == "")) {
if (!(false)) {
?>
<span class="textfieldServerError" id="exp_yearServerValidation">
Please choose a year.
</span>
<?php //WAFV_Conditional confirm.php confirm(10:)
}
}
}?>

I'll need a link where i can see the problem.

products_detail.php?ProductID=1

Buy 1
Checkout
Leave the Expire Month and Expire Year unselected then the error message shows up but not in bold red.

the server validation errors are not intended to be bold red, only the spry validationsa re.

if you want to change that, edit the webassist/themes/Dark/css/configurable.css file, change:

.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg, .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg, .textfieldServerError, .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg, .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg, .selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg {
	
}

to:

.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg, .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg, .textfieldServerError, .passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg, .confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg, .selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg {
	color:red;
        font-weight: bold;
}