Keycloak: Comprendere la struttura di un tema Keycloak

Questa documentazione fa parte della guida Personalizza l'aspetto. Consulta la guida completa qui: Personalizza facilmente le pagine di login, la console account e le email di Keycloak su Stackhero: imposta i tuoi colori, il logo, i testi e crea anche temi completamente personalizzati grazie all'editor online integrato..

👋 Benvenuto nella documentazione di Stackhero!

Stackhero offre un servizio Keycloak cloud che semplifica il deployment di un identity provider pronto per la produzione in soli 2 minuti:

• Utenti, realms e client illimitati
• Supporta OpenID Connect, OAuth 2.0, SAML 2.0, social login, federazione LDAP e Active Directory
• Nome di dominio personalizzato con HTTPS integrato per un accesso sicuro (ad esempio, https://login.tua-azienda.com)
• Temi personalizzati: personalizza facilmente le tue pagine di login, la console account e le email grazie all’editor online incluso
• Server email dedicato con SPF, DKIM e DMARC, così le conferme account e i reset password vengono gestiti automaticamente
• Database PostgreSQL integrato, con la console di amministrazione disponibile su una porta dedicata e disattivabile
• Aggiornamenti one-click per mantenere il sistema sempre aggiornato senza interventi manuali

Dedica il tuo tempo allo sviluppo, non alla configurazione: puoi provare la soluzione Keycloak cloud di Stackhero in meno di 5 minuti.

Un tema è una directory che contiene sottodirectory per ogni tipo di pagina:

themes/
  acme/
    login/                             # Pagine di login utente
      theme.properties                 # Ereditarietà tema e inclusione CSS
      resources/css/stackhero.css      # Il tuo CSS
      resources/img/logo.svg           # Le tue immagini
      messages/messages_en.properties  # I tuoi testi
    account/                           # Gestione profilo utente
    admin/                             # Aspetto della console di amministrazione
    email/                             # Template email

I temi ereditano dai temi standard di Keycloak, sovrascrivendo solo ciò che serve. Un tipico file login/theme.properties appare così:

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

• parent imposta il tema di base.
• styles elenca i file CSS da caricare. Metti il tuo CSS per ultimo per assicurarti che le modifiche abbiano effetto.

L'elenco styles sostituisce quello del tema padre, non lo estende. Includi sempre il foglio di stile del padre (css/styles.css) altrimenti la pagina perderà lo stile predefinito.

Hai bisogno dei template FreeMarker (.ftl) solo se vuoi modificare la struttura HTML. Per colori, loghi, sfondi, testi e lingue, non è necessario modificare i template. Per maggiori dettagli, consulta la documentazione sui temi Keycloak.