Overview

Correspondence Management allows you to 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
The custom icon in the Create Correspondence UI

Changing the logo in the Create Correspondence UI

To set up a logo image of your choice, do the following:

  1. Save the new logo file in the correct folder structure in CRX
  2. Set up the CSS on CRX to refer to the new logo.
  3. Clear the browser history and refresh the Create Correspondence UI.

Creating the required folder structure

Create the folder structure, as explained below, for hosting the custom logo image and the stylesheet. 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): 

  • Ensures that your files are safe in case of an update to the system. In case of upgrade, feature pack, or a hot fix, the /libs branch gets updated and if you host your changes in the /libs branch, they are overwritten.
  • Helps you not to disturb the present system/branch, which you possibly can unsettle by mistake if you use the default locations for storing the custom files.
  • Helps your resources get higher priority when AEM searches for resources. AEM is configured to search the /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:

  1. Go to http://[server]:[port]/[ContextPath]/crx/de and login as Administrator.

  2. In the apps folder, create a folder named css with path/structure similar to the css folder (located in ccrui folder). 

    Steps for creating the css folder:

    1. Right-click the css folder at the following path and select Overlay Node: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css

      Overlay node
    2. 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

      Overlay node path

      Note:

      Do not make changes in 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

    3. Click OK. The css folder is created in the specified path.

  3. In the apps folder, create a folder named imgs with path/structure similar to the imgs folder (located in ccrui folder). 

    1. Right-click the imgs folder at the following path and select Overlay Node: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs

    2. 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

    3. Click OK.

      Note:

      You can also create the folder structure in the /apps folder manually. 

  4. 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 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.

  • The default dimensions of the logo image are 48 px * 48 px. Ensure that your image is similar to this size or bigger than 48 px * 48 px.
  • If the height of your logo image is more than 50 px, Create Correspondence user interface scales down the image to a maximum height of 50 px as this is the height of the header. While scaling the image down, Create Correspondence user interface maintains the aspect ratio of your image. 
  • The Create Correspondence User Interface does not scale up your image if it is small, so ensure you use a logo image at least 48 px in height and sufficient width for clarity.

 

Use the following steps to upload the custom logo file to CRX:

  1. Go to http://[server]:[port]/[contextpath]/crx/explorer/index.jsp.

  2. If necessary, log in as Administrator.

  3. Click Content Explorer.

    Content Explorer opens in a new window. The path of Content Explorer is http://[server]:[port]/[contextpath]/crx/explorer/browser/index.jsp.

     

    Content explorer
  4. In Content Explorer, right-click the imgs folder at the following path and select New Node:

     /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

    Create new node in imgs folder

    In the Content Explorer, an empty entry is created for a new node.

  5. Make the following entries in the row for new node and then click the green check mark.

    Name: CustomLogo.png (or the name of your logo file)

    Type: nt:file

     

    CustomLogo.png as new node

    Under the imgs folder, a new folder called CustomLogo.png (or the name you have given in the previous step) is created.

    CustomLogo.png as new node
  6. Click the new folder you have created (here CustomLogo.png). The Content Explorer displays the folder's properties. 

     

  7. Double-click the jcr:content property, set its type as nt:resource, and then click the green check mark to save the entry. 

    If the property is not present, first create a property with name jcr:content.  

    Now click on newlogo.png folder, double click on jcr:content (dim option) and set type nt:resource. If not present create a property with name jcr:content. 
  8. Double-click the newly created jcr:content property. Its sub properties appear in the Content Explorer.

  9. Among the subproperties of jcr:content is jcr:data. Double-click jcr:data. The property becomes editable and the Choose File button appears in the entry.

     

    Double-click jcr:data
  10. Click Choose File and select the image file you want to use as a logo. 

    The image file formats supported are according to the browser 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. 

    Sample custom logo file
    Example: CustomLogo.png to be used as the custom logo

  11. Click the green check mark to save the entry.

  12. Click Save All.

Create the CSS to integrate the logo with the UI

The custom logo image requires an additional style sheet to be loaded in the content context. 

Use the following steps to set up the style sheet for rendering the logo:

  1. Go to http://[server]:[port]/[contextpath]/crx/de. If necessary, log in as Administrator.

  2. 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:

    1. Right-click the css folder and select Create > Create File.

    2. In the New File dialog, specify the name of the CSS as customcss.css (you cannot use a different filename), and click OK.

    3. Add the following code to the newly created css file. In content:url in the code, specify the image name you have uploaded to Content Explorer.

      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
    4. Click Save All.

Refresh the Create Correspondence UI to see the custom logo

Clear the browser cache and then open the Create Correspondence UI instance in your browser. You should see your custom logo. 

Create correspondence user interface with custom logo
The custom icon in the Create Correspondence UI

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy