Customize Your WordPress Login Page

AIO Login Pro allows you to fully customize your WordPress login page using the built-in WordPress Customizer. You can visually edit your login page design with a real-time live preview, without writing any code.

Overview

The default WordPress login page is minimal and unbranded. With the AIO Login Customizer, you can transform it into a fully branded experience by adding your logo, colors, background images, and custom styles.

This helps create a professional, consistent user experience for clients, members, and visitors.

How to Access the Login Customizer

• Go to WordPress Dashboard → AIO Login → Customize

• The WordPress Customizer will open with the AIO Login panel preloaded
• Your login page will appear on the right with a live preview

Note: The AIO Login Customizer is only accessible via the plugin menu. It does not appear in the default WordPress Customizer.

Customizer Sections

The AIO Login Customizer is divided into multiple sections for complete control over your custom login design.

Templates

Pre-designed login page layouts are available for quick styling.
Modern Center (default): Clean, centered login form on a light background
Future Tech Split: Modern split-screen layout with a tech-inspired design

Note: Detailed Template setup is covered in a separate documentation.

Logo

Replace the default WordPress logo with your own branding.

Available Options:

• Disable logo display
• Upload custom logo image
• Set logo width and height
• Adjust spacing below the logo
• Add custom logo URL (click behavior)
• Set logo title (hover tooltip)

Background

Customize the full-page background behind the login form.

Available Options:

• Background color
• Desktop background image
• Mobile-specific background image
• Background repeat (tile, repeat, etc.)
• Background position (left, center, right)
• Background size (cover, contain, initial)

Important: Background images may require a refresh in the preview panel to reflect changes.

Login Form Styling

Control the appearance of the wordpress form styling, inputs, and labels.

Available Options:

• Enable transparent form background
• Set form width and minimum height
• Adjust border radius (rounded corners)
• Apply custom box shadow and opacity
• Configure padding and border styles (CSS shorthand supported)
• Customize label colors and font sizes
• Style “Remember Me” text
• Input field spacing (margin)
• Input background and text colors
• Set input field width

Forgot Password Page

Customize the design of the “Lost your password?” page separately.

Available Options:

• Background color
• Background image

Button Customization

Style the Login button to match your design.

Available Options:

• Button background color
• Hover state color
• Text color
• Border color
• Button height and padding
• Border radius
• Shadow and opacity
• Text size

Form Footer

Customize footer links and browser tab settings.

Available Options:

• Footer link colors (e.g., Lost password, Back to site)
• Custom login page title (browser tab)
• Upload custom favicon

Important: Favicon updates may require a browser refresh to appear.

Google Fonts

Enhance typography by selecting custom fonts.

Note: Detailed Fonts Selection is covered in a separate step-by-step guide.

Custom CSS

Add advanced styling using custom CSS.

• Built-in code editor with syntax highlighting
• Real-time preview support
• Only CSS is allowed (no JavaScript)

Example:

.login form {
background: #1a1a2e;
color: #ffffff;
}

Important: Invalid CSS may break layout styling. Always test changes in preview before publishing.

Reset Customization

Restore all customization settings to default values.

• Click Master Reset to remove all changes
• Click Publish to apply the reset

Note: This reset only affects AIO Login settings. Your theme, widgets, and other Customizer settings remain unchanged.

Saving Your Changes

After making updates:

• Review changes in the live preview panel
• Click Publish at the top of the Customizer
• Visible on your custom login interface.
• View your wordpress login form in different devices.

Need Help?

If you face any issues or have questions, feel free to contact our support team. We’re here to help you get the most out of AIO Login.