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#

Form Layout#

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. Choose Form Position#

• Select where the login form appears: centered, left-aligned, or right-aligned
• Left/right positions work well when combined with a background image

2. Upload Your Logo#

• Choose Site Icon to use your existing WordPress site icon, Upload to select from your media library, or External URL to link a hosted logo
• Adjust width and height if needed (recommended: 320x100px)

3. Set Your Background#

• Choose Color for a clean solid background
• Choose Image for a visual background (upload or use external URL)
• Choose Pattern for a decorative repeating pattern
• Add an Overlay to improve form readability over busy images

4. Pick a Form Theme#

• Light — Clean white form on any background
• Dark — Dark form with light text
• Custom — Set your own form background, opacity, and text color

5. Set Your Brand Colors#

• Set Button Color to match your primary brand color
• Set Link Color for secondary elements

6. Preview Your Changes#

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

Design Examples#

Minimal Corporate#

Form Position: Center
Form Theme: Light
Background Color: #1e293b (dark slate)
Button Color: #2271b1 (blue)
Form Background: #ffffff
Border Radius: 8px
Drop Shadow: Enabled

Bold Brand with Photo#

Form Position: Left Half
Background Type: Image (full-width brand photo)
Background Overlay: Dark, 40% opacity
Form Theme: Custom
Form Background: rgba(255,255,255,0.95)
Button Color: Your primary brand color

Clean White#

Form Position: Center
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#