Login Page Customizer

Transform the default WordPress login page into a professional, branded experience. Customize the logo, colors, background, form styling, and more — all without touching any code.

Use Cases#

• Create a white-label login experience for client websites
• Match the login page design to your website’s brand colors and style
• Add your agency logo to every client site you manage
• Display a beautiful background image with your brand on the login screen

How It Works#

1. Enable the module in Switchboard
2. Configure your logo, colors, and styling options
3. Visit /wp-login.php (log out to see changes)
4. Your customizations apply instantly

Where to Find It#

Location: Log out and visit /wp-login.php to see your customized login page.

Settings#

Logo Settings#

Recommended logo size: 320x100 pixels for best display.

Background Settings#

Color Scheme#

Form Styling#

Visibility Options#

Custom CSS#

Add advanced styling with custom CSS for complete control over the login page appearance.

Step-by-Step: Creating a Branded Login#

1. Upload Your Logo#

• Click “Select” under Login Page Logo
• Choose or upload your company/client logo
• Adjust width and height if needed (recommended: 320x100px)

2. Set Your Brand Colors#

• Choose a Background Color that complements your brand
• Or upload a Background Image for a more visual impact
• Set Button Color to match your primary brand color
• Set Link Color for secondary elements

3. Style the Form#

• Adjust Form Background (white works well on most backgrounds)
• Set Border Radius (8px for modern, 0 for sharp, 20+ for rounded)
• Enable Drop Shadow for depth against the background

4. Preview Your Changes#

Log out and visit your login page to see the results. Make adjustments as needed.

Design Examples#

Minimal Corporate#

Background Color: #1e293b (dark slate)
Button Color: #6366f1 (indigo)
Form Background: #ffffff
Border Radius: 8px
Drop Shadow: Enabled

Bold Brand#

Background Image: Full-width brand photo
Button Color: Your primary brand color
Form Background: #ffffff with 12px radius
Link Color: Matching brand color

Clean White#

Background Color: #ffffff
Button Color: #000000 (black)
Form Background: #f8fafc (light gray)
Border Radius: 0px (sharp)
Drop Shadow: Disabled

Custom CSS Examples#

For advanced customization, add CSS to the Custom CSS field:

Add a subtle border to the form#

#login form {
    border: 1px solid #e5e7eb !important;
}

Style the input fields#

#login input[type="text"],
#login input[type="password"] {
    border-radius: 6px !important;
    border: 2px solid #e5e7eb !important;
}

Center the logo#

#login h1 a {
    margin: 0 auto !important;
}

FAQ#