Customize Your Password Protected Screen

With the ‘Customization’ feature, you can personalize your Password-protected screen, making it more interactive and aligned with your brand.

Upload Your Logo: Upload your preferred logo image to display on the login screen.

Adjust Logo Size: Adjust the width and height of your logo for the perfect fit.

Redirect URL: Use the Redirect URL dropdown to choose where users should be directed after logging in.

Toggle Logo Visibility: A Toggle option lets you quickly enable or disable the logo display.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Enter Your Label Text: Enter the desired text for the Label field.

Pick a Font Style: Click on the dropdown menu and select a font that matches your branding, such as Montserrat, Roboto, or Arial.

Adjust Font Size: Drag the slider to increase or decrease the text size for better readability.

Label Position: Fine-tune the placement of the label by dragging the position slider. Move it up or down as needed for alignment.

Customize Label Color: Click on the Color box to open the color picker. Select your desired color or enter a hex code for precision.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Pick a Background Color: Click on Select Color to select a background shade that complements your design. For a clean look, opt for a subtle light color!

Adjust Border Thickness: Use the Border Size slider to create thinner or thicker borders, ideal for a sleek or bold appearance.

Choose a Border Color: Click the Color picker and select a custom border color to match your brand.

Tweak Spacing & Alignment Use the sliders to adjust:

• Margin Bottom to create space between fields.
• Padding Top & Bottom to fine-tune vertical alignment.
• Padding to control inner spacing for a balanced look.

Round the Edges: Want soft, rounded corners? Adjust the Border Radius slider to curve the edges of your input fields.

Add a Stylish Shadow: Create depth by increasing the Shadow and Shadow Opacity for a modern effect.

Try the Inset Shadow Effect: Enable the Shadow Inset toggle for a cool inner-shadow effect inside the fields.

Customize Font Style: Click the Font dropdown menu and select the style that best suits your design (e.g., Montserrat, Roboto).

Adjust Text Size: Use the Font Size slider to make input text larger or smaller for better readability.

Set a Text Color: Click Select Color to pick a color that contrasts nicely with your background for clear visibility.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Choose a Background Color: Click Select Color to pick the perfect button color that complements your theme.

Set Border Thickness: Use the Border slider to make the button border thin, sleek, bold, and noticeable.

Pick a Border Color: Click the Select Color button to choose a color for the button border.

Adjust Button Spacing: Fine-tune button padding using.

• Padding is used to adjust the overall spacing inside the button.
• Padding Top & Bottom will be used to customize vertical alignment.

Round the Button Edges: Use the Border Radius slider to make your button edges soft and rounded, or keep them sharp and rectangular.

Add a Shadow Effect: Drag the Shadow slider to add depth and make your button pop on the screen.

Control Shadow Opacity: Adjust the slider to make the shadow subtle or strong.

Select a Font Style: Choose a font from the dropdown list to match the button text with your overall theme.

Resize Button Text: Use the Font Size slider to make the text inside the button more readable.

Pick a Text Color: Click Select Color to choose a font color that contrasts nicely with your button background.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Adjust Checkbox Size: Use the Size slider to make the checkbox larger or smaller to suit your design needs.

Pick a Background Color: Click Select Color to set a background color that fits your theme.

Customize Checkbox Border:

• Use the Border slider to define the thickness of the checkbox border.
• Click Select Color under Border Color to customize the checkbox outline.
• Adjust the Border Radius slider to make the checkbox sharp or rounded.

Modify Label Styles

• Choose a Font from the dropdown menu to style the text.
• Set the Position slider to fine-tune the label’s placement.
• Click Select Color to customize the label’s text color.
• Use the Font Size slider to adjust the text size for better readability.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Pick a Background Color: Click Select Color and choose the perfect shade to match your design.

Round the Corners: Drag the Border Radius slider – the higher the value, the rounder the edges.

Add Some Depth: Move the Shadow slider to create a subtle or dramatic shadow effect. Adjust Shadow Opacity to control how dark or light the shadow appears.

Fine-tune Spacing:

• Side Padding – Increase or decrease space on the left & right.
• Vertical Padding – Control the spacing on the top & bottom.

Go Transparent: Toggle the Transparent switch for a sleek, see-through background.

Resize Your Form: Adjust the Width slider to make your form broader or narrower.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Pick a Background Color: You can select a color for your form’s background by clicking the Select Color button. This will open a color picker where you can choose the desired color.

Upload Your Background Image:

• You can upload an image to be used as the background by clicking the “Upload” button.
• If you no longer want the background image, you can remove it by clicking the “Remove” button.

Background Repeat:

whether the background image should be repeated or not. The available options are:

• No Repeat: The image will not repeat.
• Repeat: The image will repeat both horizontally and vertically.
• Repeat X: The image will only repeat horizontally.
• Repeat Y: The image will only repeat vertically.

Background Size:

Set how the background image should be sized. The options include:

• Cover: The image will cover the entire background, scaling as necessary.
• Contain: The image will be resized to fit within the container without stretching.
• You may also specify custom size options.

Background Position: This option lets you choose where the background image is placed. It’s set to “Center Center” by default, but you can change it to positions like top-left, top-right, bottom-left, and more.

Note: Ensure you click ‘Save Changes’ to apply and preserve your settings after making updates. If unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Font Settings

Select your desired font from the dropdown list (e.g., Karla). The selected font will apply to the text above or below the password fields.

Adjust Font Size

Use the slider under Font Size to set the desired size (e.g., 16px).

Position Adjustment

Use the Position slider to adjust the text’s placement (e.g., move it up or down). The position value is measured in pixels, and resetting it returns it to 0px.

Change Text Color

Click the Select Color button to open a color picker and choose your preferred color.The chosen color will apply instantly to preview the changes before saving.

Set Text Alignment

From the Text Alignment dropdown, select Left, Center, or Right. This ensures the text aligns correctly above or below the password field.

Note: Ensure you click ‘Save Changes’ after making updates to apply and preserve your settings. If you are unsatisfied with the changes, use the ‘Reset’ option to restore the default settings.

Enter Your Custom CSS

Input your Custom CSS code in the provided text area. This code will directly apply styles to your site’s forms or other elements.