ClassyPress PROCustom Styling

Campaign CSS Customization

By December 26, 2020January 6th, 2021No Comments

Customizing Campaign Html element through CSS is quite an easy process.

For example, if we have to change below campaign amount color

We have always Unique ID assigned to each campaign parent div. We can write CSS using parent ID with amount color CSS like this:

#mittun-classy-campaign-6603 .mittun-thermometer-value span{color:#de3737;}


For example, if you want to change Progress Bar color:

So like above we use campaign parent Unique ID and progress bar class like this:

#mittun-classy-campaign-6603 .mittun-thermometer-progress { background: #20841b; }


For example, if you want to change Button color:

So like above we use campaign parent Unique ID and button class like this:

#mittun-classy-campaign-6603 .recurring-options-container .recurring-labels.once-label_short_donation_form { border-color: #9c2020; background-color: rgb(156, 32, 32) !important; color: #ffffff !important; }


For example, if you want to change Progress Bar pointer to an image like the example below:

So like above we use campaign parent Unique ID and pointer class like this:

#mittun-classy-campaign-6603 .style_1 .mittun-thermometer-progress-marker { background-color: transparent !important; background-image: url(https://pinkboatregatta.org/seattle/wp-content/uploads/sites/3/2017/03/sailboat.png) !important; background-position: center !important; background-size: 28px auto !important; background-repeat: no-repeat !important; }


For example, if you want to change Submit button hover color:

#mittun-classy-campaign-6606 .classy-donation-form input:hover[type="submit"], #mittun-classy-popup-campaign-6606 .classy-donation-form input:hover[type="submit"] { background-color: #900c0c; color: #ffffff; /* background: #000; */ }

Still need help? Contact Us

Last updated on November 11, 2018

Leave a Reply