Tweaking the styles of Action Network widgets and wrappers to match your site is easy! You can put any of the following code, changing the colors and styles to match your site, into your site's stylesheet or into your wrapper. This is likely called style.css. Alternatively, the WordPress Customizer has a Custom CSS feature that you can use, or you can put the following inside of <style>CSS Code Here</style> directly on your page.
If you'd like to learn more about basic CSS and code you can checkout free resources such as Don't Fear The Internet and Codecademy.
Quick note: The code below goes several levels deep into the selectors (such as .can_embed #can_embed_form a) and adds !important to each value in order to overwrite the CSS file delivered by Action Network.
/* Change the form background color, text color, and typeface */
.can_embed #can_embed_form,
.can_embed #donate_auto_modal {
background-color: #e8f9ec !important;
color: black !important;
font-family: /* enter your typeface name here */
}
/* Change link color */
.can_embed #can_embed_form a,
.can_embed #donate_auto_modal a {
color: purple !important;
}
/* Heading colors */
.can_embed #can_embed_form h1,
.can_embed #donate_auto_modal h1,
.can_embed #can_embed_form h2,
.can_embed #donate_auto_modal h2,
.can_embed #can_embed_form h3,
.can_embed #donate_auto_modal h3,
.can_embed #can_embed_form h4,
.can_embed #donate_auto_modal h4,
.can_embed #can_embed_form h5,
.can_embed #donate_auto_modal h5,
.can_embed #can_embed_form h6,
.can_embed #donate_auto_modal h6 {
color: red !important;
}
/* Welcome message background color */
.can_embed #can_embed_form #action_welcome_message #action_welcome_message_inner,
.can_embed #donate_auto_modal #action_welcome_message #action_welcome_message_inner {
background-color: rgba(0,0,0,.10) !important;
/* This is black @ 10% opacity */
}
/* Remove the Action Network Logo */
.can_embed #logo_wrap {
display: none !important;
}
/* Button Background Color */
.can_embed .can_button,
.can_embed #can_embed_form input[type="submit"],
.can_embed #can_embed_form .button,
.can_embed #donate_auto_modal input[type="submit"],
.can_embed #donate_auto_modal .button {
background-color: blue !important;
}
/* Button Background Color on Hover */
.can_embed .can_button:hover,
.can_embed #can_embed_form input[type="submit"]:hover,
.can_embed #can_embed_form .button:hover,
.can_embed #donate_auto_modal input[type="submit"]:hover,
.can_embed #donate_auto_modal .button:hover {
background-color: green !important;
}
/* Thank You Page Header Background Color */
.can_embed #can_embed_form #can_thank_you,
.can_embed #donate_auto_modal #can_thank_you {
background-color: lightblue !important;
}
/* Thank You Page Header Text Color */
.can_embed #can_embed_form #can_thank_you,
.can_embed #donate_auto_modal #can_thank_you,
.can_embed #can_embed_form #can_thank_you h1,
.can_embed #donate_auto_modal #can_thank_you h1,
.can_embed #can_embed_form #can_thank_you h4,
.can_embed #donate_auto_modal #can_thank_you h4,
.can_embed #can_embed_form #can_thank_you #action_info .action_info_user,
.can_embed #donate_auto_modal #can_thank_you #action_info .action_info_user,
.can_embed #can_embed_form #can_thank_you #action_info .action_info_user a,
.can_embed #donate_auto_modal #can_thank_you #action_info .action_info_user a {
color: black !important;
}
/* Thank You Page Divider Line */
.can_embed #can_embed_form #can_thank_you #action_info,
.can_embed #donate_auto_modal #can_thank_you #action_info {
border-color: black !important;
}