🎨 LoginPress Setup Guide for BuildWithYasar

Your complete step-by-step configuration checklist

📍 HOW TO ACCESS LOGINPRESS SETTINGS

Log in to your WordPress Admin Dashboard
Go to LoginPress → Customize in the left sidebar
You’ll see all the customization tabs – follow the sections below!

✅ SECTION 1: CUSTOMIZE YOUR LOGO

Navigate to: LoginPress → Customize → Logo

Disable Logo: UNCHECKED ✓ (Keep your logo visible)
Logo Image: Click “Select image” → Upload your BuildWithYasar logo
Logo Width: 200 px
Logo Height: 80 px
Space Bottom: 24 px
Logo URL: https://buildwithyasar.com
Logo Title: BuildWithYasar - Build AI Tools Without Code

✅ SECTION 2: LOGIN PAGE META

Navigate to: LoginPress → Customize → Login Page Meta

Login Page Title: Login - BuildWithYasar
Login Favicon: Upload your favicon (the icon that appears in browser tab)

✅ SECTION 3: BACKGROUND

Navigate to: LoginPress → Customize → Background

Background Color: #FFFFFF (White) OR #F8F8F8 (Light gray)
Enable Background Image?: UNCHECKED
Mobile Background Image: Leave empty
Background Repeat: no-repeat
Select Position: center center
Background Image Size: cover
Enable Random Background Images?: UNCHECKED
Enable Background Video?: UNCHECKED

💡 Recommendation: Keep background solid white (#FFFFFF) for a professional, clean look.

✅ SECTION 4: LOGIN FORM

Navigate to: LoginPress → Customize → Form

Enable Form Transparency: UNCHECKED
Form Background Image: Leave empty
Form Background Color: #FFFFFF (White)
Form Width: 420 px
Form Minimum Height: 0 px (Auto)
Form Radius: 8 px
Form Shadow: 16 px
Form Shadow Opacity: 12 %
Form Padding: Top: 40 px, Right: 40 px, Bottom: 40 px, Left: 40 px
Border: 1px solid rgba(0, 0, 0, 0.1)

✅ SECTION 8: BUTTON BEAUTY ⭐ YOUR GOLD BRAND COLOR!

Navigate to: LoginPress → Customize → Button

Button Color: #EE8F00 🟡 (YOUR GOLD!)
Button Border Color: #EE8F00
Button Color (Hover): #D97E00 🟠
Button Border (Hover): #D97E00
Button Box Shadow: rgba(238, 143, 0, 0.3)
Button Text Color: #000000 (Black)
Button Text Color (Hover): #000000
Button Size: 100 %
Button Top Padding: 14 px
Button Bottom Padding: 14 px
Radius: 6 px
Text Size: 16 px

✅ SECTION 14: CUSTOM CSS 🎨

Navigate to: LoginPress → Customize → Custom CSS/JS

Copy and paste this ENTIRE CSS code:

/* BuildWithYasar Brand - Login Page Custom Styles */

body.login {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#login {
    padding: 40px 0;
}

#loginform,
#lostpasswordform,
#registerform {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    padding: 40px !important;
}

.login h1 a {
    background-size: contain !important;
    width: 200px !important;
    height: 80px !important;
    margin-bottom: 24px !important;
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform input[type="text"],
#registerform input[type="text"],
#registerform input[type="email"],
#registerform input[type="password"] {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    color: #000000 !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus,
#lostpasswordform input[type="text"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="email"]:focus,
#registerform input[type="password"]:focus {
    border-color: #EE8F00 !important;
    box-shadow: 0 0 0 3px rgba(238, 143, 0, 0.1) !important;
    outline: none !important;
}

#loginform label,
#lostpasswordform label,
#registerform label {
    color: #1A1A1A !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.forgetmenot label {
    color: #5A5A5A !important;
    font-weight: 400 !important;
}

#loginform #wp-submit,
#lostpasswordform #wp-submit,
#registerform #wp-submit {
    background: #EE8F00 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

#loginform #wp-submit:hover,
#lostpasswordform #wp-submit:hover,
#registerform #wp-submit:hover {
    background: #D97E00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(238, 143, 0, 0.3) !important;
}

#loginform a,
#nav a,
#backtoblog a,
#lostpasswordform a,
#registerform a {
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#loginform a:hover,
#nav a:hover,
#backtoblog a:hover,
#lostpasswordform a:hover,
#registerform a:hover {
    color: #EE8F00 !important;
    text-decoration: underline !important;
}

#login_error,
.message,
.success {
    border-left: 4px solid #EE8F00 !important;
    background: rgba(238, 143, 0, 0.1) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 768px) {
    #loginform,
    #lostpasswordform,
    #registerform {
        padding: 24px !important;
    }
    
    .login h1 a {
        width: 150px !important;
        height: 60px !important;
    }
}

#login {
    max-width: 420px;
    margin: 0 auto;
}

🎯 FINAL STEPS

Save All Changes: Click “Publish” or “Save Changes” in LoginPress
Clear Cache: Go to LiteSpeed Cache → Toolbox → Purge → Purge All
Test: Visit https://buildwithyasar.com/wp-login.php

🎨 COLOR REFERENCE

Primary Gold: #EE8F00
Hover Gold: #D97E00
White: #FFFFFF
Black: #000000
Dark Gray: #1A1A1A
Muted Gray: #5A5A5A

🎉 You’re all set! Your login page will look professional and match your BuildWithYasar brand perfectly!