Keycloak: Su tema está listo para editar

Esta documentación forma parte de la guía Personalizar la apariencia. Consulte la guía completa aquí: Personalice fácilmente las páginas de inicio de sesión, la consola de cuenta y los correos electrónicos de Keycloak en Stackhero: configure sus colores, logotipo, textos e incluso cree temas totalmente personalizados con el editor online integrado..

👋 ¡Bienvenido a la documentación de Stackhero!

Stackhero ofrece un servicio de Keycloak en la nube que le permite desplegar un proveedor de identidad listo para producción en solo 2 minutos:

• Usuarios, realms y clientes ilimitados
• Compatible con OpenID Connect, OAuth 2.0, SAML 2.0, inicio de sesión social, federación LDAP y Active Directory
• Nombre de dominio personalizado con HTTPS integrado para un acceso seguro (por ejemplo, https://login.su-empresa.com)
• Temas personalizados: personalice fácilmente sus páginas de inicio de sesión, la consola de cuentas y los correos electrónicos con el editor online incluido
• Servidor de correo electrónico dedicado con SPF, DKIM y DMARC, para que las confirmaciones de cuenta y los restablecimientos de contraseña se gestionen automáticamente
• Base de datos PostgreSQL integrada, con la consola de administración disponible en un puerto dedicado y cerrable
• Actualizaciones con un solo clic para mantener su sistema siempre actualizado sin intervención manual

Dedique su tiempo a desarrollar, no a configurar: puede probar la solución Keycloak en la nube de Stackhero en menos de 5 minutos.

Abra themes/ y encontrará un directorio default/. Este es su tema activo, ya en uso por su instancia de Keycloak. No hay nada que seleccionar: simplemente edite sus archivos y verá los cambios reflejados al instante.

No necesita conocimientos previos sobre temas de Keycloak. Cada archivo ya incluye los ajustes habituales que puede querer modificar, mostrando el valor actual de Keycloak como ejemplo comentado. Para actualizar un valor, elimine el carácter de comentario, ajuste el valor y guarde.

Si una línea permanece comentada, Keycloak usará su valor por defecto. Esto garantiza que su servicio siempre se comporte como Keycloak estándar, incluso tras actualizaciones.

Actualizar su logotipo

Abra default/login/resources/img/. Dentro encontrará las dos imágenes que actualmente se usan en su página de inicio de sesión. Suba su propio logotipo usando el mismo nombre de archivo, keycloak-logo-text.svg, y actualice la página de inicio de sesión con Ctrl+F5 (Cmd+Shift+R en macOS).

Eso es todo lo que necesita hacer. No es necesario editar archivos ni reiniciar el servicio: los cambios se aplican en cuanto guarde. Para cambiar la imagen de fondo, actualice keycloak-bg-darken.svg en la misma carpeta.

Si prefiere usar otros nombres de archivo, puede actualizar las referencias en default/login/resources/css/stackhero.css en la sección "Your logo".

Configurar sus colores

En stackhero.css encontrará variables ya escritas con sus valores actuales:

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

Para aplicar un cambio, elimine las marcas de comentario, establezca su color, guarde y recargue la página. Eso es todo.

Mientras trabaja: Su navegador almacena en caché el CSS, las imágenes y los scripts del tema durante una hora. Cuando esté haciendo pruebas, recargue siempre con Ctrl+F5 para ver los últimos cambios. Sus visitantes verán las actualizaciones en el plazo de una hora.

Tiene control total: el archivo es CSS estándar y se carga al final, por lo que puede sobrescribir cualquier estilo. Utilice las DevTools de su navegador (F12) para inspeccionar los elementos. Keycloak 26 utiliza el PatternFly design system, así que la mayoría de las variables de color se llaman --pf-v5-global--* y pueden redefinirse en :root.

Configurar el nombre de su empresa

No es necesario editar el tema para esto. En la consola de administración, abra Realm settings > General y establezca el Display name. Este nombre aparecerá en las páginas de inicio de sesión y en los correos electrónicos.

Cambiar textos, en varios idiomas

Puede actualizar los textos sin tocar CSS ni HTML. En default/login/messages/messages_en.properties encontrará todos los textos del formulario de inicio de sesión con su redacción por defecto. Para cambiar una línea, elimine el #, escriba su propio texto y guarde:

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

Añada archivos como messages_fr.properties para francés o messages_de.properties para alemán, y luego active esos idiomas en la consola de administración en Realm settings > Localization.

Consejo: La pestaña Localization también tiene una sección Realm overrides que le permite cambiar textos directamente desde la consola: no es necesario editar archivos ni reiniciar. Utilice el método que mejor se adapte a su flujo de trabajo.

Personalizar sus correos electrónicos

Keycloak envía correos electrónicos para confirmación de dirección, restablecimiento de contraseña e invitaciones de usuario. En default/email/messages/messages_en.properties encontrará los asuntos y mensajes estándar listos para personalizar:

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

Al editar los cuerpos de los correos, recuerde:

• Mantenga los placeholders {0}, {1}, {2} (Keycloak los rellenará con el enlace, el nombre a mostrar y el tiempo de validez).
• Para escapar una apóstrofe, escríbala dos veces (don''t).

Para sobrescribir el HTML de los correos, copie la plantilla que desee desde el Keycloak base email theme en default/email/html/ y edite su copia.

Stackhero configura el envío de correos por usted con SPF, DKIM y DMARC ya preparados. Configúrelo en Realm settings > Email usando el host y puerto que aparecen en la página de su servicio.

Si necesita restablecer su tema

Si algo sale mal, puede eliminar todo el directorio default y reiniciar su servicio. Stackhero creará un tema por defecto nuevo, restaurando la apariencia estándar de Keycloak.

Sus realms, usuarios y clientes se almacenan en su base de datos y no se ven afectados.