Correspondence Management lets you rebrand its solution template for better brand value and to adhere to your organization’s branding standards. Rebranding the user interface includes changing the organization logo, which is displayed at the upper-left corner of Create Correspondence UI.
You can change the logo in the Create Correspondence UI with your organization’s logo.
The custom icon in the Create Correspondence UI
To set up a logo image of your choice, do the following:
Create the appropriate folder structure in CRX.
Upload the new logo file in the folder that you have created in CRX.
Set up the CSS on CRX to refer to the new logo.
Clear the browser history and refresh the Create Correspondence UI.
Create the folder structure, as explained below, for hosting the custom logo image and the style sheet. The new folder structure with the root folder /apps is similar to the /libs folder’s structure.
For any customization, create a parallel folder structure, as explained below, in the /apps branch.
The /apps
branch (folder structure):
/libs
branch gets updated and if you host your changes in the /libs
branch, they are overwritten./apps
branch first and then the /libs
branch to find a resource. This mechanism means that the system uses your overlay (and the customizations defined there).Use the following steps to create the required folder structure in the /apps
branch:
Go to https://'[server]:[port]'/[ContextPath]/crx/de
and login as Administrator.
In the apps folder, create a folder named css
with path/structure similar to the css folder (in the ccrui folder).
Steps for creating the css folder:
Right-click the css folder at the following path and select Overlay Node: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
Ensure that the Overlay Node dialog has the following values:
Path: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
Overlay Location: /apps/
Match Node Types: Checked
Do not change the /libs
branch. Any changes you do make may be lost, because this branch is liable to changes whenever you:
* Upgrade on your instance
* Apply a hot fix
* Install a feature pack
Click OK. The css folder is created in the specified path.
In the apps folder, create a folder named imgs
with path/structure similar to the imgs folder (in the ccrui folder).
Right-click the imgs folder at the following path and select Overlay Node: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
Ensure that the Overlay Node dialog has the following values:
Path: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
Overlay Location: /apps/
Match Node Types: Checked
Click OK.
You can also create the folder structure in the /apps folder manually.
Click Save All to save the changes on the server.
Upload your custom logo file to CRX. Standard HTML rules govern the rendering of the logo. The image file formats supported are according to the browser that you are using to access AEM Forms. All the browsers support JPEG, GIF, and PNG. For more information, see the browser-specific documentation on the supported image formats.
Use the following steps to upload the custom logo file to CRX:
Go to https://'[server]:[port]'/[contextpath]/crx/de
. If necessary, log in as Administrator.
In CRXDE, right-click the imgs folder at the following path and select Create > Create File:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
In the Create File dialog, enter the name of the file as CustomLogo.png (or the name of your logo file).
Click Save All.
Under the new file that you have created (here CustomLogo.png), jcr:content property appears.
Click jcr:content in the folder structure.
jcr:content’s properties appear.
Double-click the jcr:data property.
The Edit jcr:data dialog appears.
Now click the newlogo.png folder, then double-click jcr:content (dim option) and set the type nt:resource. If it is not present, create a property with the name jcr:content.
In the Edit jcr:data dialog, click Browse and select the image file you want to use as a logo (here CustomLogo.png).
The image file formats supported are according to the browser that you are using to access AEM Forms. All the browsers support JPEG, GIF, and PNG. For more information, see the browser-specific documentation on the supported image formats.
Example: CustomLogo.png to be used as the custom logo
Click Save All.
The custom logo image requires an additional style sheet to be loaded in the content context.
Use the following steps to create the style sheet for rendering the logo with the UI:
Go to https://'[server]:[port]'/[contextpath]/crx/de
. If necessary, log in as Administrator.
Create a file named customcss.css (you cannot use a different filename) in the following location:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
Steps to create the customcss.css file:
Right-click the css folder and select Create > Create File.
In the New File dialog, specify the name of the CSS as customcss.css
(you cannot use a different filename), and click OK.
Add the following code to the newly created css file. In content:url in the code, specify the image name you have uploaded to the imgs folder in CRXDE.
.logo, .logo:after {
content:url("../imgs/CustomLogo.png");
}
Click Save All.
Clear the browser cache, and then open the Create Correspondence UI instance in your browser so you can see your custom logo.
The custom icon in the Create Correspondence UI