Campaign CSS Customization

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 Contact Us