Keycloak: Entender la estructura de un tema Keycloak

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.

Un tema es un directorio que contiene subdirectorios para cada tipo de página:

themes/
  acme/
    login/                             # Páginas de inicio de sesión de usuario
      theme.properties                 # Herencia del tema e inclusión de CSS
      resources/css/stackhero.css      # Su CSS
      resources/img/logo.svg           # Sus imágenes
      messages/messages_en.properties  # Sus textos
    account/                           # Gestión del perfil de usuario
    admin/                             # Apariencia de la consola de administración
    email/                             # Plantillas de correo electrónico

Los temas heredan de los temas estándar de Keycloak, sobrescribiendo solo lo necesario. Un login/theme.properties típico se ve así:

parent=keycloak.v2
styles=css/styles.css css/stackhero.css

• parent define el tema base.
• styles lista los archivos CSS a cargar. Coloque su CSS al final para asegurarse de que sus cambios tengan efecto.

La lista styles reemplaza la lista del tema padre, no la amplía. Recuerde incluir la hoja de estilos del padre (css/styles.css) o su página perderá el estilo por defecto.

Solo necesita plantillas FreeMarker (.ftl) si desea cambiar la estructura HTML. Para colores, logotipos, fondos, textos e idiomas, no es necesario editar plantillas. Para más detalles, consulte la documentación de temas de Keycloak.