R3ap3r/aurora-wordpress-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand login customizer: background, colors, custom CSS

Browse Source 
Extend Settings > Login (beyond the existing style toggle + logo) toward
Loginfy parity: background image or color, form-panel background, button/
focus-accent color, and a custom login CSS field — all dependent on
"Style login page" and all falling back to the original fixed dark theme
when unset. LoginStyle.php sanitizes colors via sanitize_hex_color(),
esc_url()s the background image, and appends custom CSS (</style> stripped).
Verified on wp-login.php.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
NixReaper
2026-07-12 14:49:03 -05:00
co-authored by Claude Opus 4.8
parent f5c48bced9
commit faf9f35992
2 changed files with 66 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/Login/LoginStyle.php
+24 -9
View File
@@ -42,10 +42,25 @@ class LoginStyle
}
$logo = trim((string) Settings::get("login_logo", ""));
$bg_image = trim((string) Settings::get("login_bg_image", ""));
// Colors fall back to the original fixed dark theme when unset; invalid
// values are dropped by sanitize_hex_color (returns null) then fall back.
$bg_color = sanitize_hex_color((string) Settings::get("login_bg_color", "")) ?: "";
$form_bg = sanitize_hex_color((string) Settings::get("login_form_bg", "")) ?: "#1c2333";
$accent = sanitize_hex_color((string) Settings::get("login_button_color", "")) ?: "#4f7cff";
$custom_css = str_ireplace("</style>", "", (string) Settings::get("login_custom_css", ""));
if ($bg_image) {
$background = "url(" . esc_url($bg_image) . ") center / cover no-repeat";
} elseif ($bg_color) {
$background = $bg_color;
} else {
$background = "linear-gradient(135deg, #1b2333 0%, #0f1420 100%)";
}
?>
<style>
body.login {
background: linear-gradient(135deg, #1b2333 0%, #0f1420 100%);
background: <?php echo $background; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- composed from a sanitize_hex_color() color or esc_url()'d image above. ?>;
}
body.login #login h1 a {
<?php if ($logo): ?>
@@ -64,7 +79,7 @@ class LoginStyle
body.login form#loginform,
body.login form#registerform,
body.login form#lostpasswordform {
background: #1c2333;
background: <?php echo esc_attr($form_bg); ?>;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
@@ -84,8 +99,8 @@ class LoginStyle
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
border-color: #4f7cff;
box-shadow: 0 0 0 1px #4f7cff;
border-color: <?php echo esc_attr($accent); ?>;
box-shadow: 0 0 0 1px <?php echo esc_attr($accent); ?>;
}
body.login .forgetmenot label {
color: #9fb0d0;
@@ -99,23 +114,23 @@ class LoginStyle
color: #fff;
}
body.login .wp-core-ui .button-primary {
background: #4f7cff;
border-color: #4f7cff;
background: <?php echo esc_attr($accent); ?>;
border-color: <?php echo esc_attr($accent); ?>;
box-shadow: none;
text-shadow: none;
}
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus {
background: #3b63e0;
border-color: #3b63e0;
filter: brightness(0.92);
}
body.login #login_error,
body.login .message,
body.login .success {
background: #232b40;
border-left-color: #4f7cff;
border-left-color: <?php echo esc_attr($accent); ?>;
color: #e2e8f4;
}
<?php echo $custom_css; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- admin-authored login CSS, output raw by design; </style> stripped above. ?>
</style>
<?php
}