Custom CSS: Get the look of One Days Wages

To get the look of this page: https://www.onedayswages.org/donate/ the following code was applied:

For the form buttons:

.classy-donation-form label { background-color: #ee9e38!important; font-weight: bold; border-radius: 2px!important; width: auto; height: auto; text-transform: uppercase; padding: 10px 19px; color: #fff; float: none!important; display:inline-block; }

For the form input field (where you enter the dollar amount)

.classy-donation-form input[type="text"] { height: 40px; border: none; font-size: 20px; font-weight: bold; padding-left: 20px; max-width: 222px; margin-bottom: 3px; }

To get the form to be only 300px wide and to float in the center of the page, use this: 

.classypress-master { max-width: 300px; margin: 0 auto; text-align: center; padding: 25px; position: relative; display:block; }

To achieve the big hero image underneath the form— that is theme-specific and was done using their visual page builder.

Mittun is available for-hire to add additional CSS classes to your donation form to make it look exactly how you'd like!

Still need help? Contact Us Contact Us