Site Members: Changing the Design of the Password Window
5 min read
Design the window that visitors see when signing up or logging in to your Members Area. This also applies to any password protected page on your site.
This page is already designed for you, based on your site colors and fonts, to maintain a consistent look. From the Theme Manager, you can control these settings and change the design as a result.
In this article, learn how to change the:
Using a custom signup / login form?
This article refers to the default forms. Click below to learn how to customize:
Changing the Title Font
The font for the title text on the password window is taken from the Heading 2 text theme. If you want to change the font, you need to customize and save this theme from the Theme Manager.
To change Heading 2 in the Theme Manager:
- Click the Theme Manager icon
on the left side of the Editor. - Click Text.
- Hover over Heading 2 and click the Edit icon
. - Customize the theme using the available options. You can change the font, color and size, and bold and italicize the text.
- Click Apply to save your changes.
Important:
This also changes any other text with the Heading 2 theme on your site.
Changing the Text Elements Font
The font for all text elements appearing on the page is taken from the Paragraph 2 text theme. If you want to change the font, you need to customize and save this text theme from the Theme Manager.
To change Paragraph 2 in the Theme Manager:
- Click the Theme Manager icon on the left side of the Editor.
- Click Text.
- Hover over Paragraph 2 and click the Edit icon .
- Customize the theme using the available options. You can change the font, color and size, and bold and italicize the text.
- Click Apply to save your changes.
Important:
This also changes any other text with the Paragraph 2 theme on your site.
Changing the Text Color
Pick a different color for the page's title and text by adjusting the darkest tint of Color 1 in the Theme Manager. This tint is automatically used across your site for various text elements.
To change Color 1 in the Theme Manager:
- Click the Theme Manager icon on the left side of the Editor.
- Click Colors.
- Click the darkest tint under Color 1.
- Click the Color Picker next to Color Preview to change the color.
- (Optional) Use the sliders to change the Saturation and Brightness values.
- Click Apply.
Important:
Changing the tint by following the steps above will change all other elements with the same tint.
Changing the Button and Link Color
Choose a different color for links and buttons by adjusting the middle tint of Color 2 in the Theme Manager. This color is automatically used across your site for many actionable elements like buttons, links and menu items.
To change Color 2 in the Theme Manager:
- Click the Theme Manager icon on the left side of the Editor.
- Click Colors.
- Click the middle tint under Color 2.
- Click the Color Picker next to Color Preview to change the color.
- (Optional) Use the sliders to change the Saturation and Brightness values.
- Click Apply.
Important:
Changing the tint by following the steps above will change all other elements with the same tint.
Changing the Background Color
To change the page background color, choose a different color for Color 1 in the Theme Manager. This color is automatically used across your site, mostly for page and element backgrounds.
To change Color 1 in the Theme Manager:
- Click the Theme Manager icon on the left side of the Editor.
- Click Colors.
- Click the Edit Color icon
next to Color 1. - Select a new color in one of the following ways:
- Use the cursor to find and select a new color.
- Enter the exact color in HEX, RGB or HSB values.
- (Optional) Adjust the tints to your liking:
- Click the tint you want to adjust.
- Use the sliders to change the Saturation and Brightness values.
- Click Apply.
Important:
Changing Color 1 by following the steps above will change all other elements with this color.
Tip:
View your live site to see the design changes! You cannot see the window by previewing your site.