Theme Variables

The theme variables use the SCSS variables functionality to allow us to control various stylistic elements of the campaign theme in the blink of an eye.

These variables differ between themes so make sure to check out what's already in your theme's styles in Design > Custom CSS or in the 🖌Style Panel in the pages editor.

Each variable should be self explanatory but feel free to contact support if you need some help understanding what's going on.

A good example of how a theme variable might be used would be to control border width. Let's say you wanted to maintain to consistent border width across your buttons and other elements, you could create a global variable to use throughout your styles. Having this unified reference means that it is easy to reuse and update at any time 🤯

Example

Set $borderWidth variable and use throughout your styles

$borderWidth: 3px;

.button {
  //...
  border-width: $borderWidth;
}

.donation-form { 
  //...
  border: $primaryColor solid $borderWidth;
}

.foo-element {
  //...
  position: absolute;
  top: -$borderWidth;
  left: -$borderWidth;
}