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;
  
    --vs-body: transparent;
    --vs-body-bg: 255, 255, 255;
    --vs-body-color: #000000;
    --vs-body-color-rgb: 0, 0, 0;
    --vs-heading-color: var(--vs-heading-color, #000000);
    --vs-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;
    
    --vs-border-radius: .25rem;
    --vs-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;
  
    --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;
  }

Custom Fonts

Customizing the font is optional, the form uses "Proxima Nova" by default.

To change font, set --vs-body-font-family and optionally --vs-headings-font-family to give headings a different font. Setting these is the equivalent of setting the CSS font-family property.

.vs-club-registration {
      --vs-body-font-family: 'Averia Libre', serif;
      --vs-headings-font-family: 'Caveat', cursive;
}

Built-in fonts

Font Name	Font-Family
Proxima Nova	Font used by default
Averia Libre	`'Averia Libre', serif`
Caveat	`'Caveat', cursive`
Inter	`'Inter', sans-serif`
Josefin Sans	`'Josefin Sans', sans-serif`
Lato	`'Lato', sans-serif`
Montserrat	`'Montserrat', sans-serif`
Noto Sans	`'Noto Sans', sans-serif`
Open Sans	`'Open Sans', sans-serif`
Oswald	`'Oswald', sans-serif`
Poppins	`'Poppins', sans-serif`
Raleway	`'Raleway', sans-serif`
Roboto	`'Roboto', sans-serif`

Need a different font? We can add most open-source fonts (e.g. from Google Fonts) on request — just contact Vinoshipper support. Commercial/licensed fonts are not supported.