Appropo Docs

Customising CSS

Custom CSS can be used to style the checkout webpages.

NOTE

Custom CSS doesn’t apply to emails

The payment submit button uses the accent colour to acheive a shine effect when the form is ready to submit.

Variables

CSS Variables are controlled by the accent and background colour fields.

:root {
  --accent-colour: #f27033;
  --accent-text-colour: #612d14;
  --bg-colour: #f27033;
  --text-colour: #612d14;
}

Examples

Dark

/* Change Text Colour */
body.theme-minimal {
  color: white;
}

/* Change Label Colour */
body.theme-minimal .Text.Text-color--gray600,
body.theme-minimal .Text.Text-color--gray500,
body.theme-minimal .Text.Text-color--gray700,
body.theme-minimal .Text.Text-color--gray800 {
  color: white;
}


/* Change Input Colour */
#mainInput {
  color: white;
}

Two Tone

/* make right side white*/
body.theme-minimal .App-Container:not(.App-Container--setupMode)::before,
body.theme-minimal .App-Payment-Card {
  background: #000;
  border-radius: 2px;
}

/* Increase the logo size */
body.theme-minimal .HeaderImage--icon:not(.HeaderImage--iconFallback) img {
  height: 60px;
  width: auto;
}