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 
}