Below is a list of the most common CSS enhancements to ClassyPress Pro.
First thing’s first. If an updated style isn’t displaying correctly, make sure to add the “important” tag before the semicolon “;” to override existing settings:!important
Add a border radius of 20px to the once/monthly buttons:.recurring-labels {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
Add a border radius of 20px to the custom amount buttons ($10, $20, Other, etc):.classy-amount input[type="button"] {
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
How to add a hover effect to the once/monthly buttons:.recurring-labels:hover {
background-color:white!important;
border:2px solid #000000!important;
}
How to give the hover effect a smooth transition:.recurring-labels {
border:2px solid transparent;
transition: background-color .5s, border .5s;
-webkit-transition: background-color .5s, border .5s;
-moz-transition: background-color .5s, border .5s;
}
Watch this short 5-minute explainer video for “hover effects” —
How to add a hover effect to the custom amount buttons:.classy-amount input[type="button"]:hover { /* add custom css here */ }
How to customize fonts of all input fields:
.classy-donation-form input,
.classy-donation-form textarea {
font-size:12px;
font-family:Arial;
}
How to customize custom amount entry field only:
.classy-donation-form input[name="amount"] {
font-size:50px;
font-family:Arial;
padding-left:40px;
}
How to customize all other fields:
.classy-donation-form input,
.classy-donation-form textarea {
font-size:50px;
font-family:Arial
}
How to customize the email field only:
Option 1:.classy-donation-form input[type="email"] { /* custom CSS */ }
Option 2:.classy-donation-form input[name="email"] { /* custom CSS */ }
Want more CSS tips? Check out our Custom CSS Help Docs Here