Keycloak: Il tuo tema è pronto per essere modificato

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.

Apri themes/ e troverai una directory default/. Questo è il tuo tema attivo, già in uso dalla tua istanza Keycloak. Non c'è nulla da selezionare: modifica semplicemente i file e vedrai subito i cambiamenti.

Non è richiesta alcuna conoscenza pregressa dei temi Keycloak. Ogni file contiene già le impostazioni più comuni che potresti voler modificare, mostrando il valore Keycloak attuale come esempio commentato. Per aggiornare un valore, rimuovi il simbolo di commento, modifica il valore e salva.

Se una riga rimane commentata, Keycloak utilizza il valore predefinito. Questo garantisce che il servizio sia sempre conforme al comportamento standard di Keycloak, anche dopo eventuali aggiornamenti.

Aggiornare il logo

Apri default/login/resources/img/. All'interno troverai le due immagini attualmente utilizzate nella pagina di login. Carica il tuo logo usando lo stesso nome file, keycloak-logo-text.svg, e aggiorna la pagina di login con Ctrl+F5 (Cmd+Shift+R su macOS).

Non serve altro. Non è necessario modificare altri file o riavviare il servizio: l'aggiornamento viene applicato appena salvi. Per cambiare l'immagine di sfondo, aggiorna keycloak-bg-darken.svg nella stessa cartella.

Se preferisci usare nomi file diversi, puoi aggiornare i riferimenti nella sezione "Your logo" di default/login/resources/css/stackhero.css.

Impostare i colori

In stackhero.css troverai già le variabili con i valori attuali:

: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; */

Per applicare una modifica, rimuovi i simboli di commento, imposta il tuo colore, salva e ricarica la pagina. Tutto qui.

Durante la personalizzazione: Il browser memorizza nella cache CSS, immagini e script del tema per un'ora. Durante le modifiche, aggiorna sempre con Ctrl+F5 per vedere i cambiamenti più recenti. I tuoi visitatori vedranno l'aggiornamento entro un'ora.

Hai pieno controllo: il file è CSS puro e viene caricato per ultimo, quindi puoi sovrascrivere qualsiasi stile. Usa gli strumenti di sviluppo del browser (F12) per ispezionare gli elementi. Keycloak 26 utilizza il PatternFly design system, quindi la maggior parte delle variabili colore sono denominate --pf-v5-global--* e possono essere ridefinite in :root.

Impostare il nome della tua azienda

Non è necessario modificare il tema per questa operazione. Nella console di amministrazione, apri Realm settings > General e imposta il Display name. Questo nome apparirà nelle pagine di login e nelle email.

Modificare i testi, in più lingue

Puoi aggiornare i testi senza toccare CSS o HTML. In default/login/messages/messages_en.properties troverai tutti i testi del form di login con la dicitura predefinita. Per modificare una riga, rimuovi il #, inserisci il tuo testo e salva:

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

Aggiungi file come messages_fr.properties per il francese o messages_de.properties per il tedesco, poi abilita queste lingue nella console di amministrazione in Realm settings > Localization.

Suggerimento: La scheda Localization offre anche una sezione Realm overrides che consente di modificare i testi direttamente dalla console, senza modificare file o riavviare. Usa il metodo che meglio si adatta al tuo flusso di lavoro.

Personalizzare le email

Keycloak invia email per la conferma dell'indirizzo, il reset della password e gli inviti agli utenti. In default/email/messages/messages_en.properties troverai gli oggetti e i messaggi standard pronti per essere personalizzati:

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

Quando modifichi il corpo delle email, ricorda:

• Mantieni i placeholder {0}, {1}, {2} (Keycloak li sostituirà con il link, il nome visualizzato e il tempo di validità).
• Per inserire un apostrofo, scrivilo doppio (don''t).

Per sovrascrivere l'HTML delle email, copia il template desiderato dal Keycloak base email theme in default/email/html/, poi modifica la tua copia.

Stackhero configura per te l'invio delle email con SPF, DKIM e DMARC già impostati. Configuralo in Realm settings > Email usando host e porta forniti nella pagina del servizio.

Se hai bisogno di ripristinare il tema

Se qualcosa va storto, puoi eliminare l'intera directory default e riavviare il servizio. Stackhero ricreerà un tema predefinito, ripristinando l'aspetto standard di Keycloak.

I tuoi realms, utenti e client sono memorizzati nel database e non vengono toccati.