ActionNetwork Reference
ActionNetwork’s CSS snippets for embed customization
Using the right Embed Code
This setting allows you to over-ride the ActionNetwork CSS using your theme CSS
ActionNetwork signup Form
As displayed on this page (right or bottom)
/* Start ActionNetwork Customisation */
/* Action Network - form - Minimal */
#donation_recipient_wrap, #donate_login, #can_sidebar, #can_embed_form li#d_sharing {display:none !important;}
#can_embed_form #logo_wrap, #can_embed_form #action_info, #can_embed_form #can_embed_form_inner #d_sharing, #can_embed_form h2, #can_embed_form h4 {
display: none !important;
}
/* Action Network - forcing to one column */
#can_main_col {
width: 100% !important;
float: none;
}
#can_embed_form.can_float #form_col1, #can_embed_form.can_float #form_col2, #can_embed_form #can_sidebar{
float: none !important;
width: 100% !important;
}
/* Action Network - form - remove line */
#can_embed_form #d_sharing {
border-top: none !important;
}
/* custom colour for hover and select */
#can_embed_form label.donate_amount:hover, #can_embed_form label.donate_amount-selected {
background-color: #0c71c3 !important;
color: #fff !important;
}
/* Action Network - form - custom submit button */
#can_embed_form input[type=submit], #can_embed_form .button {
font-size: 20px !important;
font-weight: 600 !important;
padding: 12px 10px !important;
color: #fff !important;
text-transform: none !important;
}
/* custom submit button hover */
#can_embed_form input[type=submit]:hover, #can_embed_form .button:hover {
color: #fff !important;
background-color: #3fa2f3 !important;
}
/* reduce space between form fields */
#can_embed_form form li.core_field {
margin: 0 0 0px!important;
}
#can_embed_form form li.core_field:nth-child(5) {
margin: 0 0 15px!important;
}
/* remove padding and border */
.can_embed #can_embed_form {
padding: 0px!important;
border: none!important;
}
/* Action Network - Form submitted - change awful green*/
#can_embed_form #can_thank_you {
background-color: transparent !important;
color: #fff !important;
padding: 12px 0px 0px !important;
margin: 0 0 0px !important;
text-align: left !important;
}
/* Action Network - Form submitted - change title*/
#can_embed_form #can_thank_you h1 {
font-size: 46px!important;
color: #f95a09!important;
}
/* Action Network - Form submitted - change "share this" text color*/
#can_embed_form h4 {
color: #fff;
}
/* Action Network - Form submitted - change social share text color*/
#can_embed_form.can_thank_you_wrap a {
color: #fff !important;
}
/* Action Network - Form submitted - remove help us speel */
#can_embed_form #can_thank_you h4 {
display:none;
}
/* Action Network - Form submitted - increase thank you copy size */
#can_embed_form #can_thank_you p {
font-size: 20px !important;
}
/* Action Network - Form submitted - remove share link */
#can_embed_form #can_thank_you #action_info {
display:none !important;
}
#can_embed_form .can_thank_you-block input[type=text], #can_embed_form .can_thank_you-block label {
display:none !important;
}
/* Action Network - Form submitted - remove email */
#can_embed_form .can_thank_you-block:nth-child(2) {
display:none
}
/* Action Network - Form submitted - remove user embed*/
#can_embed_form .can_thank_you-block:nth-child(3) {
display:none
}
/* End ActionNetwork Customisation */
The following CSS is for the Urannah signup form
/* Action Network - form - Minimal */
#can_main_col, #can_embed_form .action_sidebar>h4, #can_embed_form #d_sharing li:first-child {
display: none;
}
#can_embed_form #can_sidebar {
width: 100% !important;
float: none !important;
}
/* Action Network - form - remove line */
#can_embed_form #d_sharing {
border-top: none !important;
}
/* Action Network - form - custom submit button */
.can_button, #donate_auto_modal input[type=submit], #donate_auto_modal .button, #donate_make_recurring_modal input[type=submit], #donate_make_recurring_modal .button, #can_embed_form input[type=submit], #can_embed_form .button {
font-size: 18px !important;
font-weight: 600 !important;
border-radius: 6px !important;
color: #fff;
background-color: #f95a09 !important;
}
/* Action Network - form - input - background color */
#can_embed_form input[type=text], #can_embed_form input[type=password], #can_embed_form input[type=url], #can_embed_form input[type=email], #can_embed_form input[type=tel], #can_embed_form input[type=number],
.can_embed #can_embed_form select.can_select,
.can_embed #can_embed_form select,
#can_embed_form select
{
border: 1px solid #494949 !important;
background-color: #000 !important;
opacity: 100 !important;
}
#page-container #can_embed_form .country_drop_wrap select.can_select {
height: 44px !important;
color:#8e8b8b !important;
}
/* Action Network - form - input - text color */
#can_embed_form input, #can_embed_form textarea {
color: #fff !important;
}
/* Action Network - form - input - active label */
#can_embed_form .floatlabel-wrapper .floatlabel-label {
color: #d8d7d7 !important;
}
#can_embed_form .floatlabel-wrapper .floatlabel-label:after {
background-color: #000 !important;
}
/* Action Network - form - text color */
#can_embed_form {
color: #fff !important;
}
/* Action Network - form - link color */
#can_embed_form a {
color: #f95a09 !important;
}
/* Action Network - Form - Horizontal checkbox */
#can_embed_form .check_radio_field label {
display: inline-block !important;
}
/* Action Network - Form - phone- removing flag */
#can_embed_form .iti__flag {
background-image: none !important;
width: 0px !important;
}
#can_embed_form .iti input, #can_embed_form .iti input[type=text], #can_embed_form .iti input[type=tel] {
padding-right: 0px !important;
}
/* Action Network - Form - edit prefs - removing background */
#can_embed_form #d_sharing #edit_d_sharing_opts {
background-color: transparent !important;
}
/* Action Network - Form - edit prefs - increase font */
#can_embed_form #d_sharing {
font-size: 13px !important;
}
/* Action Network - Form submitted - change awful green*/
#can_embed_form #can_thank_you {
background-color: transparent !important;
color: #fff !important;
padding: 12px 0px 0px !important;
margin: 0 0 0px !important;
text-align: left !important;
}
/* Action Network - Form submitted - change title*/
#can_embed_form #can_thank_you h1 {
font-size: 46px!important;
color: #f95a09!important;
}
/* Action Network - Form submitted - change "share this" text color*/
#can_embed_form h4 {
color: #fff;
}
/* Action Network - Form submitted - change social share text color*/
#can_embed_form.can_thank_you_wrap a {
color: #fff !important;
}
/* Action Network - Form submitted - remove help us speel */
#can_embed_form #can_thank_you h4 {
display:none;
}
/* Action Network - Form submitted - increase thank you copy size */
#can_embed_form #can_thank_you p {
font-size: 20px !important;
}
/* Action Network - Form submitted - remove share link */
#can_embed_form #can_thank_you #action_info {
display:none !important;
}
#can_embed_form .can_thank_you-block input[type=text], #can_embed_form .can_thank_you-block label {
display:none !important;
}
/* Action Network - Form submitted - remove email */
#can_embed_form .can_thank_you-block:nth-child(2) {
display:none
}
/* Action Network - Form submitted - remove user embed*/
#can_embed_form .can_thank_you-block:nth-child(3) {
display:none
}
