Login Page Branding
Customize your WordPress login page to match your brand and create a professional first impression for your users.
Overview
BuddyX Pro lets you transform the standard WordPress login page with custom logos, backgrounds, colors, and layouts. You can choose from pre-designed themes or create your own split-screen design.
Getting Started
- Go to WordPress Admin → Appearance → Customize
- Navigate to Site Settings → Login Customization
- Enable Enable Custom Login toggle
- Choose your customization approach:
What You Can Do
Logo Customization
Login page logo customization options including logo upload, dimensions, and URL settings
Control how your logo appears on the login page.
| Option | Description | Default |
|---|---|---|
| Disable Logo | Hide the logo completely | Off |
| Custom Logo | Upload a custom logo image | Site Identity logo |
| Logo Width | Set logo width in pixels | 84px |
| Logo Height | Set logo height in pixels | 84px |
| Logo Space Bottom | Add spacing below logo | 0px |
| Logo URL | Where logo links when clicked | Homepage |
| Logo Title | Tooltip text on hover | “Powered by WordPress” |
| Page Title | Browser tab title | “Log In” |
Pro Tip: If you don’t upload a custom login logo, BuddyX Pro automatically uses your site logo from Appearance → Customize → Site Identity.
Layout Options
Option 1: Pre-Designed Themes
Pre-designed login page themes including Simple, Minimal, Creative, and Modern options
Choose from 4 professionally designed login page templates:
Simple Theme
- Clean, centered design
- Perfect for minimalist brands
- Best for corporate sites
Minimal Theme
- Ultra-clean design
- Maximum focus on login form
- Ideal for modern startups
Creative Theme
- Bold, artistic layout
- Eye-catching backgrounds
- Great for creative agencies
Modern Theme
- Split-screen design with content area
- Customizable left-side content
- Perfect for community sites
Modern theme with split-screen layout showing customizable left-side content area
To use themes:
- Enable Choose Theme toggle
- Select your preferred theme
- Customize colors and backgrounds
Option 2: Custom Split View
Create your own split-screen login page:
- Keep Choose Theme disabled
- Enable Split View toggle
- Configure these options:
| Setting | Purpose |
|---|---|
| Background Image | Image for left side of screen |
| Heading | Welcome message (e.g., “Welcome back!”) |
| Description | Additional welcome text |
| Overlay Opacity | Darken background (0-100%) |
| Heading Color | Text color for heading and description |
Background Customization
Background customization options including image gallery, custom upload, and color settings
Make your login page visually stunning with custom backgrounds.
For Pre-Designed Themes:
| Option | Description |
|---|---|
| Background Gallery | Choose from 4 built-in images |
| Background Color | Solid color background |
| Background Image | Upload your own image |
| Background Video | Upload video background (MP4) |
Priority Order: Custom Image > Background Color > Gallery Image
Video Background Requirements:
- Format: MP4
- Recommended size: Under 5MB
- Auto-plays on loop, muted
- Only visible on Modern theme
Login Form Styling
Login form styling options including transparency, dimensions, border radius, and shadow settings
Customize the appearance of the login form container.
| Setting | Description | Default |
|---|---|---|
| Enable Form Transparency | Make form background transparent | Off |
| Background Image | Image behind form fields | None |
| Background Color | Solid color for form | None |
| Form Width | Maximum width | 350px |
| Form Minimum Height | Minimum vertical space | 200px |
| Form Radius | Rounded corners | 5px |
| Form Shadow | Shadow blur size | 15px |
| Form Shadow Opacity | Shadow darkness | 80% |
| Form Padding | Internal spacing | 26px |
Note: Background Image and Color are disabled when Form Transparency is enabled.
Input Field Styling
Control the appearance of username and password fields.
Field Appearance:
| Setting | Description | Default |
|---|---|---|
| Input Field Background Color | Background color | Theme default |
| Input Field Text Color | Text color | Theme default |
| Input Field Border Color | Border color | Theme default |
| Input Field Width | Field width | 100% |
| Input Field Border Radius | Rounded corners | 3px |
Label Styling:
| Setting | Description | Default |
|---|---|---|
| Input Field Label Color | “Username” and “Password” color | Theme default |
| Remember Me Label Color | “Remember Me” checkbox label | Theme default |
| Label Font Size | Size of “Username”/”Password” | 14px |
| Remember Me Font Size | Size of “Remember Me” | 14px |
Link Colors:
| Setting | Description |
|---|---|
| Login Form Link Color | Color for “Lost password?” and other links |
| Login Form Link Hover Color | Link color on mouse hover |
Submit Button Styling
Submit button customization including colors, dimensions, padding, and hover effects
Customize the “Log In” button appearance.
Colors:
| Setting | Description |
|---|---|
| Button Background Color | Button fill color |
| Button Border Color | Border color |
| Button Background Color (Hover) | Color when hovering |
| Button Border Color (Hover) | Border color when hovering |
| Button Text Color | Text color |
| Button Text Color (Hover) | Text color when hovering |
Dimensions:
| Setting | Default |
|---|---|
| Button Width | 100% |
| Padding Top | 13px |
| Padding Bottom | 13px |
| Border Radius | 3px |
| Font Size | 13px |
Effects:
| Setting | Description | Default |
|---|---|---|
| Shadow Size | Drop shadow blur | 0px |
| Shadow Opacity | Shadow darkness | 80% |
Password Reset Page
Customize the “Lost Password” form separately from the main login form.
| Setting | Description |
|---|---|
| Background Image | Custom background for reset form |
| Background Color | Solid color for reset form |
Note: These settings only appear when Form Transparency is disabled.
Modern Theme Special Options
When using the Modern theme, additional left-side content options appear:
| Setting | Description | Default |
|---|---|---|
| Heading | Left-side headline | “Welcome Back” |
| Description | Left-side text | “Sign in to continue” |
| Content Position | Vertical positioning (5-90%) | 30% |
| Left Side Overlay Opacity | Background overlay darkness | 30% |
| Content Color | Text color | White |
Recommended Designs by Site Type
Community/Social Network
- Theme: Modern
- Split View: Enabled
- Heading: “Welcome back to [Community Name]!”
- Background: Group photo or community activity
- Form: Semi-transparent with brand colors
E-Learning Platform
- Theme: Simple
- Background: Education-themed image
- Button Color: Match course category colors
- Logo: Centered, larger size (120px × 120px)
Business/Corporate
- Theme: Minimal
- Background Color: Brand primary color
- Form: White, with shadow
- Logo: Standard size, professional
Creative Agency
- Theme: Creative
- Background: Bold, artistic image
- Form Transparency: Enabled
- Button: Contrasting accent color
Membership Site
- Theme: Modern with split view
- Background: Member benefits imagery
- Heading: “Members Only”
- Description: Highlight exclusive features
Live Preview
You can preview your login page customization in real-time:
- In the Customizer, look for the Preview Login Page button
- Click it to navigate to the login page
- Changes update live as you adjust settings
- Forms are disabled in preview mode
Tip: The customizer automatically allows the login page URL for preview. You can switch between your site and login page using the preview navigation.
Common Questions
How do I change the logo on the login page?
Go to Appearance → Customize → Site Settings → Login Customization → Logo. You can either:
- Upload a custom logo via Custom Logo field
- Or use your site logo (set in Appearance → Customize → Site Identity)
Can I have different logos for the site header and login page?
Yes. Upload a separate image in Login Customization → Logo → Custom Logo. If this is empty, your site logo is used.
Why isn’t my background image showing?
Check these settings:
- Ensure Enable Custom Login is ON
- If using themes, enable Choose Theme
- Check if Background Color is set (it overrides gallery images)
- Custom Background Image overrides both color and gallery
- For split view, ensure Split View toggle is enabled
How do I remove the logo completely?
Enable Disable Logo toggle in Login Customization → Logo section.
Can I use a video background?
Yes, but only with pre-designed themes:
- Enable Choose Theme
- Go to Background section
- Enable Background Video toggle
- Upload an MP4 video file
Videos auto-play on loop and are muted by default.
My changes aren’t visible. What’s wrong?
Common issues:
- Enable Custom Login toggle is OFF
- Browser cache – try hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
- Customizer preview vs actual page – click Publish to save
- Another plugin overriding login page styles
- Theme compatibility issue with custom login plugins
Can I customize the registration page separately?
Registration page customization is available when BuddyPress is active. See the Registration Page documentation for details.
How do I reset to WordPress defaults?
Disable the Enable Custom Login toggle. All customizations will be hidden, and WordPress default login page appears.
What image size should I use for backgrounds?
Recommended sizes:
- Full background: 1920×1080px (Full HD)
- Split view background: 960×1080px (half screen)
- Logo: 200×200px maximum
- Form background: 800×600px
Format: JPG or PNG (WebP for better performance) File size: Under 500KB for images, under 5MB for videos
Can I add custom CSS to the login page?
Yes. Use Appearance → Customize → Additional CSS. Target login page with:
body.login #login {
/* Your custom styles */
}Does this work on mobile devices?
Yes. All login page customizations are responsive. Split view displays as single column on mobile, and form adjusts to screen width.
Can I add social login buttons?
Social login buttons require a separate plugin. BuddyX Pro styling automatically applies to common social login plugins like:
- Nextend Social Login
- Super Socializer
- WP Social Login
How do I change the “Remember Me” checkbox color?
The checkbox uses browser defaults. You can change the label color via Remember Me Label Color setting.
To style the checkbox itself, use custom CSS:
body.login #login input[type="checkbox"] {
accent-color: #your-color;
}Related Settings
- Registration Page Branding – Customize the registration page
- Password Reset – Password reset email customization
- Site Identity – Main site logo and branding
- Color Schemes – Global color settings
Support
Need help with login page customization?
- Documentation: BuddyX Pro Documentation
- Support Forum: Support Portal
- Email: support@wbcomdesigns.com
Before contacting support:
- Check browser console for JavaScript errors
- Disable other plugins temporarily to check for conflicts
- Try a different browser
- Take screenshots of your customizer settings