close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Checkout CSS

Thread began 3/23/2011 11:30 am by bill173836 | Last modified 3/25/2011 10:27 am by Jason Byrnes | 1373 views | 7 replies |

bill173836

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

bill173836

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>

Sign in to reply to this post

Jason ByrnesWebAssist

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

Sign in to reply to this post

bill173836

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:)
}
}
}?>

Sign in to reply to this post

Jason ByrnesWebAssist

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

Sign in to reply to this post

bill173836

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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;
}
Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...