Custom Branding

Out of the box, Cancel Flows are often a big step forward in terms of design and UX.

To apply custom branding, add your custom CSS in the Cancel Flows section of the Branding page.

From here, you can change the color of backgrounds, fonts, buttons and everything you see on the page. To test the branding of your Cancel Flows you can follow the instructions here.

Logo sizing

img.logo { max-width: 100px !important; }

Text color of entire page:

h2, .wysiwyg *, label {
  color: #483729 !important;
}

Background color:

body.cancel_sessions {
  background-color: #EAE8E7 !important;
}

Offer button colors:

button.accept_offer {
  background-color: #7EC6BC !important;
  color: #48392b !important;
}

Cancel button colors:

button[name="page1_cancel_button"],
button[name="page2_cancel_button"] {
  background-color: #DB7623 !important;
  color: #FFFFFF !important;
}

Nevermind link colors:

button[name="page1_nevermind_button"],
button[name="page2_nevermind_button"] {
  color: #483729 !important;
}

Images

Removing default image cropping/shadow:

.offer_contents .asset-container {
  height: auto !important;
}
.offer_contents .asset-container img {
  box-shadow: none !important;
  object-fit: contain !important;
  height: auto !important;
  position: relative !important;
}

Offer Buttons

Hiding first offer button on page 1

.offers_container .offer:nth-child(1) button.accept_offer { display: none }

Hiding second offer button on page 1

.offers_container .offer:nth-child(2) button.accept_offer { display: none }