Simple Theming

When using Simple Theming, then there's no further actions to take.

Advanced Styling

Club Registration styling is unique due to using an iFrame to facilitate the registration process. You can define CSS Variables to customize the look and extend beyond simple theming.

If you wish to define only a background and text color of highlighted items (buttons, alerts, certain links), you will need to define the following CSS variables:

.vs-club-registration {
    /* The following are required to define a custom theme color. */
    --vs-embed-theme: #0d6efd;
    --vs-embed-theme-rgb: 13, 110, 253; /* The number RGB values of --vs-embed-theme. */
    --vs-embed-theme-color: #ffffff; /* The text color. You are responsible for choosing a color that is accessible with proper contrast. */

    /* Colors when hovering over effected buttons and links. Defaults to `--vs-embed-theme*` if defined. */
    --vs-embed-theme-hover: #0052cb;
    --vs-embed-theme-hover-rgb: 0, 82, 203;
    --vs-embed-theme-hover-color: #ffffff;
    --vs-embed-theme-hover-opacity: 0.8;
}

For more advanced customization, here are all definable variables with their default settings. For more information, see Advanced Styling.

.vs-club-registration {
    --vs-embed-theme: #0d6efd;
    --vs-embed-theme-rgb: 13, 110, 253;
    --vs-embed-theme-color: #ffffff;

    --vs-embed-theme-hover: #0052cb;
    --vs-embed-theme-hover-rgb: 0, 82, 203;
    --vs-embed-theme-hover-color: #ffffff;
    --vs-embed-theme-hover-opacity: 0.8;
  
    --bs-body: transparent;
    --bs-body-bg: 255, 255, 255;
    --bs-body-color: var(--bs-black);
    --bs-body-color-rgb: var(--bs-black-rgb);
    --bs-heading-color: var(--bs-black);
    --bs-body-font-family: var(--vs-font-family-proxima-nova);
  
    --vs-headings-margin-top: 0;
    --vs-headings-margin-bottom: .5rem;
    --vs-headings-font-family: var(--bs-body-font-family);
    --vs-headings-font-weight: 500;
    --vs-headings-line-height: 1.2;
    --vs-headings-letter-spacing: normal;
    
    --bs-secondary-color: rgba(33, 37, 41, .75);
    --bs-secondary-color-rgb: 33, 37, 41;
    
    --bs-border-radius: .25rem;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  
    --vs-embed-btn-link: var(--vs-embed-theme);
    --vs-embed-btn-link-hover: var(--vs-embed-theme);
    --vs-embed-link-primary: var(--vs-embed-theme);
    --vs-embed-link-primary-hover: var(--vs-embed-theme);
    --vs-link-decoration: none;
    --vs-link-hover-decoration: underline;
  
    --vs-radio-selected-background: var(--bs-white);
    --vs-form-control-background-color: var(--bs-white);
  
    --vs-embed-btn-primary-color: var(--bs-btn-color);
    --vs-embed-btn-primary-bg: var(--bs-btn-bg);
    --vs-embed-btn-primary-border-color: var(--vs-embed-btn-primary-bg);
    --vs-embed-btn-primary-border-radius: var(--bs-btn-border-radius, 0.25rem);
    --vs-embed-btn-primary-border-width: var(--bs-btn-border-width, 1px);
  
    --vs-embed-btn-primary-hover-color: var(--bs-btn-hover-color);
    --vs-embed-btn-primary-hover-bg: var(--bs-btn-hover-bg);
    --vs-embed-btn-primary-hover-border-color: var(--bs-btn-hover-border-color);
  
    --vs-embed-btn-primary-focus-shadow-rgb: var(--bs-btn-focus-shadow-rgb);
  
    --vs-embed-btn-primary-active-color: var(--bs-btn-active-color);
    --vs-embed-btn-primary-active-bg: var(--bs-btn-active-bg);
    --vs-embed-btn-primary-active-border-color: var(--bs-btn-active-border-color);
    --vs-embed-btn-primary-active-shadow: var(--bs-btn-active-shadow);
  
    --vs-embed-btn-primary-disabled-color: var(--bs-btn-disabled-color);
    --vs-embed-btn-primary-disabled-bg: var(--bs-btn-disabled-bg);
    --vs-embed-btn-primary-disabled-border-color: var(--bs-btn-disabled-border-color);
  
    --bs-alert-margin-bottom: calc(var(--vs-spacer, 1rem) * .5);
    --vs-alert-primary-color: #000000;
    --vs-alert-primary-bg: #cfe2ff;
    --vs-alert-primary-border-color: var(--vs-alert-primary-bg);
    --vs-alert-primary-icon-bg: var(--vs-embed-theme, #0d6efd);
    --vs-alert-primary-icon-fg: #ffffff;
    --bs-alert-margin-bottom: calc(1rem * .5);
  
    --vs-wells-color: var(--bs-black);
    --vs-wells-heading-color: var(--bs-heading-color, var(--vs-wells-color, #000000));
    --vs-wells-background-color-rgb: 248, 249, 250;
    --vs-wells-bg-opacity: 1;
    --vs-wells-offset-color: var(--bs-body-color);
    --vs-wells-offset-background-color-rgb: 255, 255, 255;
    --vs-wells-offset-bg-opacity: 1;
    
    --vs-headings-margin-top: 0;
    --vs-headings-margin-bottom: .5rem;
    --vs-headings-font-family: var(--bs-body-font-family);
    --vs-headings-font-style: null;
    --vs-headings-font-weight: 500;
    --vs-headings-line-height: 1.2;
  }