Skip to content

Instantly share code, notes, and snippets.

@bekarice
Created May 6, 2015 20:21
Show Gist options
  • Save bekarice/25eafb9ed06fbddc967c to your computer and use it in GitHub Desktop.
Save bekarice/25eafb9ed06fbddc967c to your computer and use it in GitHub Desktop.
WooCommerce Chase Paymentech Sample Pay Page Styles (works well with Storefront theme)
/*-------------------------------------------------------------
Add these styles to your child theme's stylesheet
or custom CSS plugin (*not* the pay form css)
-------------------------------------------------------------*/
.pay-page-checkout #payment .payment_methods li .payment_box.payment_method_chase_paymentech,
.pay-page-checkout #payment .payment_methods {
background: none;
border: none;
margin-top: 0;
padding-top: 0.5em;
font-size: 24px;
text-align:center;
font-weight: 700;
}
.payment_method_chase_paymentech .form-row {
font-size: 16px;
}
#wc-chase-paymentech-pay-form {
width: 95%;
border: 1px solid rgba(0,0,0,.1);
background: #dff0d8;
min-height: 575px;
}
/*-------------------------------------------------------------
All of the following CSS should be placed in its own stylesheet within your theme. For example:
chase-pay-form.css
This will be the stylesheet used for the pay form (and will only apply to the Chase iframed pay form).
You should use the path to this stylesheet in the Pay Form Style URL
-------------------------------------------------------------*/
tbody {
font-family: 'Helvetica Neue', sans-serif;
}
a {
font-size: 14px;
}
#theForm table {
margin: 20px auto;
}
tbody label {
display: block;
margin-top: 10px;
}
.creNameLabel label {
margin-top: 0;
}
input[type="text"] {
display: block;
padding: 0.7em;
font-family: 'Courier New', Monaco, monospace;
font-size: 14px;
background-color: #fff;
color: #333;
min-width: 300px;
border: 2px solid #e1e1e1;
border-radius: 3px;
line-height: 1;
}
input[type="text"]:focus {
background-color: #fafafa;
color: #484b51;
}
#amountDisplay {
background-color: #efefef;
}
select {
padding: 5px;
font-size: 14px;
font-family: inherit;
line-height: 1;
border: 2px solid #e1e1e1;
background: #fff;
border-radius: 2px;
height: 30px;
}
.creTypeRow select {
width: 100%;
}
.creExpirationRow select {
width: 40%;
font-size: 12px;
}
.creButtonRow {
display: block;
margin: 10px auto 0;
}
.creButtonLabel {
display: block;
width: 100%;
}
button,
input[type="button"],
input[type="submit"] {
background-color: #96588a;
border: 1px solid #96588a;
color: #ffffff;
font-size: 1.087em;
padding: .618em 1em;
width: 48%;
display: inline-block;
float: none;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
}
button:hover;
input[type="button"]:hover,
input[type="submit"]:hover {
background-color: #7d3f71;
border-color: #7d3f71;
color: #ffffff;
}
.cancelButton {
background-color: #60646c;
border-color: #60646c;
color: #ffffff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment