Skip to main content

Registration page background and form and content area colors

The body of the registration page is contained in three layers: under everything is the page background color or image. Next is the registration container which holds the landing page content and registration form. Finally, with a two-column layout, the form container holds the registration form.

You can set a color for each layer and upload a background image; you can also set the registration container to transparent to allow the page background to show through.

Jump to: Set the registration form color | Set the content area background color | Set the registration page background

This example shows the layers in a two-column bar layout.

LandingPage-Bar-ContainerLayers@800px.png

Set the registration form color

In a two-column layout, you can set the background color of the registration form. Remember that the highlight color sets the color of buttons; select a color that contrasts well.

To set the registration form color:

Go to the Player & Branding tab. Open Advanced Branding and set the Form Container Color.

This example shows a white form container on the registration page.

BarLayout-RegPage-FormContainerCallout_cropped.png

Set the content area background color

The registration container color is the background color for the landing page content and the registration form.

You can:

  • Set a color to make it stand out from the page background
  • Set it to transparent to showcase the background color or image
  • For the two-column layout, set it to the same color as the form container for a unified look

Note: When using a transparent registration container on a dark page background, you might need to adjust the text color for the landing page content to make it visible.

To set the content area color:

Go to the Player & Branding tab. Open Advanced Branding and set the Registration Container Color.

This example shows a light gray registration container with a white registration form (form container).

BarLayout-RegPage-FormContainerCallout_cropped.png

Set the registration page background

The registration page background displays behind the registration container. You can select a background color, upload a background image, or both. (Set the banner to transparent to have the page background color show through.)

Background images are centered and repeat horizontally. We recommend uploading a horizontally repeating image, or gradient, or an image at least 1900 x 1200 pixels.

Choose a background image that is roughly as tall as the registration container will be. The registration container gets taller to accommodate long registration forms and landing page content, but background images don’t scale vertically to fill the space. The background color is displayed where the background image ends.

To set the registration page background:

Go to the Player & Branding tab. Open Advanced Branding and set the Reg Page Background.

RegPageBackground-Color.png

To upload a background image, click Upload Background Image.

This example shows a gradient background image that can be repeated across the registration page and an image that can be stretched.

Background Gradient

Background Image
Gradient.png
BackgroundImage.jpeg

This example shows a gradient image as the background on the registration page.

RegPage-Bar-2Column@800px.jpeg