Personalizar la pantalla de login con CSS

css marzo 11, 2026

Cambia completamente el aspecto visual de la pantalla wp-login.php para adaptarla a la identidad de la marca. Sin tocar ningún archivo del núcleo de WordPress.

Casos de uso: white label para clientes, branding corporativo en el login, portales de membresía con diseño propio, agencias que entregan sitios personalizados.

/* Fondo de la página de login */
body.login {
    background-color: #1a1a2e;
}

/* Contenedor del formulario */
#login {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Logo superior */
#login h1 a {
    background-image: url('/wp-content/uploads/logo.png');
    background-size: contain;
    width: 200px;
    height: 60px;
}

/* Botón de acceso */
#wp-submit {
    background: #e94560 !important;
    border-color: #e94560 !important;
    border-radius: 6px !important;
    width: 100%;
    height: 42px;
}

body.login — Clase que WordPress añade al <body> exclusivamente en la pantalla de login.
#login h1 a — El logo superior es un enlace con imagen de fondo; se personaliza cambiando el background-image.
#wp-submit — ID del botón de acceso. Requiere !important para sobreescribir los estilos de WordPress.
Cómo cargar este CSS: usa el hook login_enqueue_scripts desde tu plugin o functions.php.