Anpassa gränssnitt för att skapa korrespondens customize-create-correspondence-ui
Ökning overview
Med Correspondence Management kan ni ommärka sin lösningsmall för att få ett bättre varumärkesvärde och följa företagets varumärkesstandarder. När du ändrar användargränssnittet innebär det att du ändrar organisationslogotypen, som visas i det övre vänstra hörnet av användargränssnittet Create Correspondence.
Du kan ändra logotypen i användargränssnittet Create Correspondence med din organisations logotyp.
Den anpassade ikonen i gränssnittet Skapa korrespondens
Ändra logotypen i användargränssnittet för Create Correspondence changing-the-logo-in-the-create-correspondence-ui
Så här ställer du in en logotypbild:
-
Skapa lämplig mappstruktur i CRX.
-
Ladda upp den nya logotypfilen i mappen som du har skapat i CRX.
-
Konfigurera CSS på CRX för att hänvisa till den nya logotypen.
-
Rensa webbläsarhistoriken och uppdatera gränssnittet Skapa korrespondens.
Skapar den mappstruktur som krävs creatingfolderstructure
Skapa mappstrukturen som beskrivs nedan för värdtjänster för den anpassade logotypbilden och formatmallen. Den nya mappstrukturen med rotmappen /apps liknar strukturen i mappen /libs.
Om du vill anpassa något skapar du en parallell mappstruktur, enligt beskrivningen nedan, i grenen /apps.
The /apps
gren (mappstruktur):
- Säkerställer att dina filer är säkra om det finns en uppdatering av systemet. Om det finns en uppgradering, ett funktionspaket eller en snabbkorrigering
/libs
grenen uppdateras och om du är värd för dina ändringar i/libs
de skrivs över. - Gör att det inte stör det aktuella systemet/den aktuella grenen, som du kan ta bort av misstag om du använder standardplatserna för lagring av anpassade filer.
- Hjälper dina resurser att få högre prioritet när AEM söker efter resurser. AEM har konfigurerats för att söka i
/apps
förgrena först och sedan/libs
för att hitta en resurs. Den här mekanismen innebär att systemet använder övertäckningen (och de anpassningar som definieras där).
Följ de här stegen för att skapa den nödvändiga mappstrukturen i /apps
gren:
-
Gå till
https://'[server]:[port]'/[ContextPath]/crx/de
och logga in som administratör. -
Skapa en mapp med namnet i appmappen
css
med en sökväg/struktur som liknar css-mappen (i ccrui-mappen).Steg för att skapa css-mappen:
-
Högerklicka på css mapp på följande sökväg och välj Överläggsnod:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
-
Kontrollera att dialogrutan Overlay Node har följande värden:
Sökväg:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
Plats för övertäckning:
/apps/
Matcha nodtyper: Markerad
note note NOTE Ändra inte /libs
gren. Alla ändringar du gör kan gå förlorade eftersom den här grenen kan ändras när du:code language-none * Uppgradera till din instans * Använd en snabbkorrigering * Installera ett funktionspaket
-
Klicka OK. CSS-mappen skapas i den angivna sökvägen.
-
-
Skapa en mapp med namnet i appmappen
imgs
med en bana/struktur som liknarimgs
i crui-mappen.-
Högerklicka på imgs mapp på följande sökväg och välj Överläggsnod:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
-
Kontrollera att dialogrutan Overlay Node har följande värden:
Sökväg: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
Plats för övertäckning: /apps/
Matcha nodtyper: Markerad
-
Klicka OK.
note note NOTE Du kan också skapa mappstrukturen i mappen /apps manuellt.
-
-
Klicka Spara alla för att spara ändringarna på servern.
Överför den nya logotypen till CRX uploadlogo
Överför din anpassade logotypfil till CRX. Standardreglerna för HTML styr återgivningen av logotypen. De bildfilsformat som stöds är beroende på vilken webbläsare du använder för att få åtkomst till AEM Forms. Alla webbläsare har stöd för JPEG, GIF och PNG. Mer information finns i den webbläsarspecifika dokumentationen om de bildformat som stöds.
- Standardmåtten för logotypbilden är 48 px * 48 px. Se till att bilden liknar den här storleken eller är större än 48 px * 48 px.
- Om höjden på logotypbilden är större än 50 px skalas bilden ned i användargränssnittet Create Correspondence till en maximal höjd på 50 px eftersom det är höjden på sidhuvudet. När du skalar ned bilden behåller användargränssnittet Skapa korrespondens bildens proportioner.
- Gränssnittet Skapa korrespondens skalar inte upp bilden om den är liten, så se till att du använder en logotypbild som är minst 48 px hög och tillräckligt bred för att bilden ska bli tydlig.
Följ de här stegen för att överföra den anpassade logotypfilen till CRX:
-
Gå till
https://'[server]:[port]'/[contextpath]/crx/de
. Logga in som administratör om det behövs. -
Högerklicka på imgs mapp på följande sökväg och välj Skapa > Skapa fil:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
-
I dialogrutan Skapa fil anger du namnet på filen som CustomLogo.png (eller namnet på logotypfilen).
-
Klicka Spara alla.
Under den nya filen som du har skapat (här CustomLogo.png) visas egenskapen jcr:content.
-
Klicka på jcr:innehåll i mappstrukturen.
jcr:innehållets egenskaper visas.
-
Dubbelklicka på jcr:data -egenskap.
Dialogrutan Redigera jcr:data visas.
Klicka nu på mappen newlogo.png, dubbelklicka på jcr:content (dim option) och ange typen nt:resource. Om den inte finns skapar du en egenskap med namnet jcr:content.
-
I dialogrutan Redigera jcr:data klickar du på Bläddra och välj den bildfil som du vill använda som logotyp (här CustomLogo.png).
De bildfilsformat som stöds är beroende på vilken webbläsare du använder för att få åtkomst till AEM Forms. Alla webbläsare har stöd för JPEG, GIF och PNG. Mer information finns i den webbläsarspecifika dokumentationen om de bildformat som stöds.
Exempel: CustomLogo.png som ska användas som anpassad logotyp
-
Klicka Spara alla.
Skapa CSS för återgivning av logotypen med användargränssnittet createcss
Den anpassade logotypbilden kräver en extra formatmall för att kunna läsas in i innehållskontexten.
Följ de här stegen för att skapa formatmallen för återgivning av logotypen med användargränssnittet:
-
Gå till
https://'[server]:[port]'/[contextpath]/crx/de
. Logga in som administratör om det behövs. -
Skapa en fil med namnet customcss.css (du kan inte använda ett annat filnamn) på följande plats:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
Steg för att skapa filen customcss.css:
-
Högerklicka på css mapp och markera Skapa > Skapa fil.
-
I dialogrutan Ny fil anger du CSS-namnet som
customcss.css
(du kan inte använda ett annat filnamn) och klicka på OK. -
Lägg till följande kod i den nyligen skapade CSS-filen. I content:url i koden anger du bildnamnet som du har överfört till imgs-mappen i CRXDE.
code language-css .logo, .logo:after { content:url("../imgs/CustomLogo.png"); }
-
Klicka Spara alla.
-
Uppdatera användargränssnittet Create Correspondence så att du kan se den anpassade logotypen refreshccrui
Rensa webbläsarcachen och öppna sedan instansen Create Correspondence UI i webbläsaren så att du kan se din anpassade logotyp.
Den anpassade ikonen i gränssnittet Skapa korrespondens