Correspondence Management vous permet d’adapter le modèle de solution à l’identité graphique de votre société afin de conserver la valorisation de votre marque. Le changement d'identité graphique de l'interface utilisateur comprend la modification du logo de la société, qui est affiché dans le coin supérieur gauche de l'interface utilisateur de création de correspondance.
Vous pouvez changer le logo dans l'interface utilisateur de création de correspondance pour le remplacer par le logo de votre entreprise.
UIFigure de création de correspondance : Icône personnalisée dans l’interface utilisateur de création de correspondance
Pour configurer une image de logo de votre choix, procédez comme suit :
Créez la structure de dossiers appropriée dans CRX.
Téléchargez le nouveau fichier de logo dans le dossier que vous avez créé dans CRX.
Configurez le CSSon CRX pour faire référence au nouveau logo.
Effacez l’historique du navigateur et actualisez l’interface utilisateur de création de correspondance.
Créez la structure de dossiers, comme expliqué ci-après, pour héberger l'image de logo et la feuille de style personnalisées. La nouvelle structure de dossiers avec le dossier racine /apps est similaire à la structure de dossier /libs.
Pour une personnalisation, créez une structure de dossiers parallèle, comme expliqué ci-après, dans la branche /apps.
La branche /apps (structure de dossiers) :
Suivez les étapes ci-dessous pour créer la structure de dossiers requise dans la branche /apps :
Accédez à https://[server]:[port]/[ContextPath]/crx/de
et connectez-vous en tant qu’administrateur.
Dans le dossier des applications, créez un dossier nommé css
dont le chemin d'accès/la structure est similaire au dossier css (situé dans le dossier ccrui).
Procédure de création du dossier css :
Cliquez avec le bouton droit sur le dossier css à l’emplacement suivant et sélectionnez Noeud d’incrustation : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
Chemin d’accès : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
Emplacement de l’incrustation: /apps/
Faire correspondre les types de noeud: coché
N'apportez aucune modification à la branche /libs. Toutes les modifications que vous apportez risquent d’être perdues, car cette branche est exposée aux modifications chaque fois que vous :
Cliquez sur OK. Le dossier CSS est créé au niveau du chemin d'accès indiqué.
Dans le dossier des applications, créez un dossier nommé imgs
avec un chemin/une structure similaires au dossier imgs (situé dans le dossier ccrui).
Cliquez avec le bouton droit sur le dossier imgs à l’emplacement suivant et sélectionnez Noeud d’incrustation : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
Chemin d’accès : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
Emplacement de l’incrustation: /apps/
Faire correspondre les types de noeud: coché
Cliquez sur OK.
Vous pouvez également créer la structure de dossiers dans le dossier /apps manuellement.
Cliquez sur Enregistrer tout pour enregistrer les modifications sur le serveur.
Téléchargez votre fichier de logo personnalisé dans CRX. Les règles HTML standard régissent le rendu du logo. Les formats de fichier image pris en charge dépendent du navigateur utilisé pour accéder à AEM Forms. Tous les navigateurs prennent en charge les fichiers JPEG, GIF et PNG. Pour en savoir plus, reportez-vous à la documentation du navigateur sur les formats d'image pris en charge.
Suivez les étapes ci-dessous pour télécharger le fichier du logo personnalisé dans CRX :
Accédez à https://[server]:[port]/[contextpath]/crx/de
. Le cas échéant, connectez-vous en tant qu’administrateur.
Dans CRXDE, faites un clic droit sur le dossier imgs au niveau du chemin d'accès suivant et sélectionez Créer > Créer un fichier :
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
Dans la boîte de dialogue Créer un fichier, entrez le nom du fichier au format CustomLogo.png (ou le nom de fichier de votre logo).
Cliquez sur Enregistrer tout.
Dans le nouveau fichier que vous avez créé (ici CustomLogo.png), la propriété jcr:content s'affiche.
Cliquez sur jcr:content dans la structure de dossiers.
Les propriétés de jcr:content s'affichent.
Doublon-clic sur la propriété jcr:data.
La boîte de dialogue Edit jcr:data s'affiche.
Cliquez maintenant sur le dossier newlogo.png, cliquez sur jcr:content (option dim) en doublon et définissez type nt:resource. Dans le cas contraire, créez une propriété du nom de jcr:content.
Dans la boîte de dialogue Edit jcr:data, cliquez sur Parcourir et sélectionnez le fichier image que vous souhaitez utiliser comme logo (ici, CustomLogo.png).
Les formats de fichier image pris en charge dépendent du navigateur utilisé pour accéder à AEM Forms. Tous les navigateurs prennent en charge les fichiers JPEG, GIF et PNG. Pour en savoir plus, reportez-vous à la documentation du navigateur sur les formats d'image pris en charge.
Figure: Exemple : CustomLogo.png à utiliser comme logo personnalisé
Cliquez sur Enregistrer tout.
L'image de logo nécessite une feuille de style supplémentaire à charger dans le contexte du contenu.
Effectuez les étapes suivantes pour définir la feuille de style pour le rendu du logo :
Accédez à https://[server]:[port]/[contextpath]/crx/de
. Le cas échéant, connectez-vous en tant qu’administrateur.
Créez un fichier nommé customcss.css (vous ne pouvez pas utiliser un autre nom de fichier) à l’emplacement suivant :
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
Procédure à suivre pour créer le fichier customcss.css :
Faites un clic droit sur le dossier css et sélectionnez Créer > Créer un fichier.
Dans la boîte de dialogue Nouveau fichier, spécifiez le nom du fichier CSS sous customcss.css
(vous ne pouvez pas utiliser un autre nom de fichier), puis cliquez sur OK.
Ajoutez le code suivant dans le fichier CSS que vous venez de créer. Dans la partie content:url du code, indiquez le nom de l'image que vous avez téléchargée dans le dossier imgs dans CRXDE.
.logo, .logo:after {
content:url("../imgs/CustomLogo.png");
}
Cliquez sur Enregistrer tout.
Effacez la mémoire cache du navigateur, puis ouvrez l'instance de l'interface utilisateur de création de correspondance dans votre navigateur. Vous devez voir votre logo personnalisé.
logo personnaliséFigure : Icône personnalisée dans l’interface utilisateur de création de correspondance