This article will explain how to edit the custom CSS which was added when you imported a demo.
- Once you import a demo, a snippet of CSS will be added to the plugins Custom CSS section. This is located in General Settings >> Advanced >> Custom CSS.
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
Last updated on July 25, 2018