Show Menu
ARGOMENTI×

Personalizzare l’interfaccia utente per la corrispondenza

Panoramica

La gestione della corrispondenza consente di rigenerare il modello di soluzione per migliorare il valore del marchio e soddisfare gli standard aziendali in materia di marchio. Il riordinamento dell’interfaccia utente include la modifica del logo dell’organizzazione, visualizzato nell’angolo in alto a sinistra dell’interfaccia utente Crea corrispondenza.
Potete cambiare il logo nell’interfaccia utente Crea corrispondenza con il logo aziendale.
Icona personalizzata nell’interfaccia Crea corrispondenza (Create Correspondence UI Figure): Icona personalizzata nell’interfaccia utente Crea corrispondenza

Modifica del logo nell’interfaccia utente Crea corrispondenza

Per impostare un’immagine logo desiderata, effettuate le seguenti operazioni:
  1. Create la struttura di cartelle appropriata in CRX .
  2. Caricate il nuovo file del logo nella cartella creata in CRX.
  3. Impostate il CSS su CRX per fare riferimento al nuovo logo.
  4. Cancella la cronologia del browser e aggiorna l’interfaccia utente Crea corrispondenza.

Creazione della struttura di cartelle richiesta

Create la struttura di cartelle, come illustrato di seguito, per ospitare l’immagine logo personalizzata e il foglio di stile. La nuova struttura di cartelle con la cartella principale /apps è simile alla struttura della cartella /libs.
Per qualsiasi personalizzazione, create una struttura di cartelle parallela, come illustrato di seguito, nel ramo /apps.
Il ramo /apps (struttura delle cartelle):
  • Assicurarsi che i file siano sicuri in caso di aggiornamento del sistema. In caso di aggiornamento, pacchetto di funzioni o correzione, il ramo /libs viene aggiornato e se ospitate le modifiche nel ramo /libs, queste vengono sovrascritte.
  • Consente di non disturbare l'attuale sistema/ramo, che è possibile disinstallare per errore se si utilizzano le posizioni predefinite per la memorizzazione dei file personalizzati.
  • Consente alle risorse di ottenere una priorità più alta quando AEM cerca le risorse. AEM è configurato per eseguire prima la ricerca nel ramo /apps, quindi nel ramo /libs per trovare una risorsa. Questo meccanismo significa che il sistema utilizza la sovrapposizione (e le personalizzazioni ivi definite).
Utilizzate i passaggi seguenti per creare la struttura di cartelle richiesta nel ramo /apps:
  1. Accedete a https://[server]:[port]/[ContextPath]/crx/de e accedete come amministratore.
  2. Nella cartella delle app, create una cartella denominata css con percorso/struttura simile alla cartella css (che si trova nella cartella ccrui).
    Passaggi per la creazione della cartella css:
    1. Fate clic con il pulsante destro del mouse sulla cartella css nel percorso seguente e selezionate Nodo ​sovrapposizione: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
    2. Verificate che la finestra di dialogo Nodo sovrapposizione contenga i seguenti valori:
      ​Percorso: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
      ​Posizione overlay: /apps/
      ​Corrispondenza tipi di nodo: Selezionato
      Non apportare modifiche al ramo /libs. Eventuali modifiche apportate potrebbero andare perse, in quanto il ramo potrebbe essere modificato ogni volta che:
      • Aggiornamento dell’istanza
      • Applicazione di una correzione
      • Installare un pacchetto di funzioni
    3. Fai clic su OK . La cartella css viene creata nel percorso specificato.
  3. Nella cartella delle app, create una cartella denominata imgs con percorso/struttura simile alla cartella imgs (che si trova nella cartella ccrui).
    1. Fate clic con il pulsante destro del mouse sulla cartella imgs nel percorso seguente e selezionate Overlay Node : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
    2. Verificate che la finestra di dialogo Nodo sovrapposizione contenga i seguenti valori:
      ​Percorso: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
      ​Posizione overlay: /apps/
      ​Corrispondenza tipi di nodo: Selezionato
    3. Fai clic su OK .
      Potete anche creare manualmente la struttura di cartelle nella cartella /apps.
  4. Fate clic su Salva tutto per salvare le modifiche sul server.

Creare il CSS per integrare il logo nell’interfaccia utente

L'immagine logo personalizzata richiede il caricamento di un foglio di stile aggiuntivo nel contesto del contenuto.
Per impostare il foglio di stile per il rendering del logo, procedere come segue:
  1. Passa a https://[server]:[port]/[contextpath]/crx/de . Se necessario, effettuate l’accesso come amministratore.
  2. Create un file denominato customcss.css (non potete usare un nome di file diverso) nel percorso seguente:
    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
    Passaggi per creare il file custom.css:
    1. Fate clic con il pulsante destro del mouse sulla cartella css e selezionate Crea > Crea file .
    2. Nella finestra di dialogo Nuovo file, specificate il nome del CSS come customcss.css (non potete usare un nome file diverso) e fate clic su OK .
    3. Aggiungete il codice seguente al file css appena creato. In content:url nel codice, specificate il nome immagine caricato nella cartella imgs in CRXDE.
      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
      
    4. Fate clic su Salva tutto .

Aggiornare l’interfaccia utente Crea corrispondenza per visualizzare il logo personalizzato

Cancella la cache del browser e apri l’istanza dell’interfaccia utente Crea corrispondenza nel browser. Dovresti vedere il tuo logo personalizzato.
Create l'interfaccia utente per la corrispondenza con il logo ​Figura personalizzato: Icona personalizzata nell’interfaccia utente Crea corrispondenza