Customizing LiveCycle home page

Customizing LiveCycle home page

Search
Adobe LiveCycle User Guide

On this page

Applies to: Adobe LiveCycle

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

You can customize the HTML code and CSS file to provide a distinct organization-specific appearance to Livecycle home page. For example, you can an images to use logo of your organization. Home page supports the following customizations:

  • Customizing properties of a module
  • Adding new modules
  • Hiding existing modules
  • Customizing icons
  • Adding new locales
An example of a customized LiveCycle home page
An example of a customized LiveCycle home page

Before you start

For every module, LiveCycle creates a node in CRXDE lite with a set of customizable properties. The following table lists all of the properties:   

Property Name Description Localized
Name Name of the module. This name is displayed on the home page.  Yes
Description Description of the module. This description is displayed on the home page. 
 Yes
URL URL to access the module. N/A
Help Description Tool tip text for the Help URL property.   Yes
Help URL Hyperlink of the Help page. Yes
isActive Show/hide a module on the home page. To display a module on home page, set value of the isActive property toTrue. 
 N/A

Customize non-localized properties of a module

  1. Log in to CRXDE lite with administrator credentials. The default location of CRXDE lite is  http://<server>:<port>/lc/crx/de.

  2. Navigate to the /libs/livecycle/landingpage/components folder.  

  3. To customize a node, copy it to the /apps/livecycle/landingpage/components folder and click Save All. 

  4. Select the node copied in previous step, and click Properties. The non-localized properties are displayed. 

  5. Modify the non-localized properties of the node and click Save All.

Customize localized properties of a module

  1. Log in to CRXDE lite with administrator credentials. The default location of CRXDE lite is  http://<server>:<port>/lc/crx/de.

  2. Navigate to /libs/livecycle/landingpage folder, copy the locales folder to the /apps/livecycle/landingpage folder, and click Save All. 

  3. Navigate to the /libs/livecycle/landingpage/components folder.  

  4. To customize a node, copy it to the /apps/livecycle/landingpage/components folder and click Save All.

  5. Select the node copied in previous step, and click Properties.

  6. Select a property to customize and take note of the value. The value is name of a node that contains content which can be localized. The localized content is displayed on the home page.  

  7. Navigate to the /apps/livecycle/landingpage/locales folder. Open the subfolder related to the language you use. Select the node with name similar to the value noted in step 6, click Properties.  Change value of the 'sling:message' property and click Save All.   

Adding new modules to home page  

  1. Log in to CRXDE lite with administrator credentials.

    The default location of CRXDE lite is  http://<server>:<port>/lc/crx/de.

  2. Navigate to the /libs/livecycle/landingpage/components folder.  

  3. Copy any node to the /apps/livecycle/landingpage/components folder and rename copied node. Click Save All.

    Note:

    It is easier to identify a node with the descriptive name. Choose a descriptive name.

    Note:

    LiveCycle uses nodes named adminui, fm, cm, flexws, htmlws, pdfg, re, rm, and pr.  Do not use these names for your nodes. On using above names, existing nodes located at the /libs/livecycle/components/landingpage folder are overridden. 

  4. Select the newly pasted node and click Properties.  Based on your requirements, change value of other properties and click Save All.

    Note:

    Ensure that the isActive property is set to true. 

Localize strings of a module

  1. Log in to CRXDE lite with administrator credentials. The default location of CRXDE lite is http://<server>:<port>/lc/crx/de.

  2. Copy the locales folder from the /libs/livecycle/landingpage/ folder to the /apps/livecycle/landingpage/ folder and click Save All. 

  3. Navigate to the /apps/ livecycle/landingpage/components/locales folder and open a subfolder. Create a copy of any node present in the subfolder within the subfolder. Click Save All.  

  4. Rename the newly created node to reflect the name of the key. For example, rename the folder to ALC.LP.MyModule.description.

  5. Select the renamed folder and click Properties.

  6. In the Properties tab, set value of the sling:key property to the name of the node and value of the sling:message property to localized string. Click Save All.

Add access control list to a module

  1. Open http://<server>:<port>/lc/crx/explorer and log in with administrator credentials.

  2. Click Group Administration. A new window opens. 

  3. In the Group Administration window, click Create Group, add GroupID, add Principal Name, click OK, and click Close.

    Note:

    Ensure that GroupId and Principal Name are identical. Moreover, these names should be identical to the LiveCycle permission/role names to which the access is required. 

  4. Open http://<server>:<port>/lc/crx/de and login with administrator credentials. 

  5. Navigate to the /apps/livecycle/landingpage/components folder. Select the node to add access control list. 

  6. Click Access Control, remove all the non-required groups except the everyone group. 

  7. Click + and browse the required group. Select Allow and jcr:read. Click OK and click Save All. 

Change logo 

  1. Log in to CRXDE lite with administrator credentials. The default location of CRXDE lite is http://<server>:<port>/lc/crx/de.

  2. Create an images folder at /apps/livecycle/landingpage/ and add images to it. To add images:

    1. Install a WebDav client. 
    2. In the WebDav client, navigate to the /apps/livecycle/landingpage/images folder. For more information, see webdav access.
    3. Add new images. For example, add newLogo.png and newOrgName.png

  3. Navigate to the /apps/livecycle/landingpage/css folder. Create a file named newStyle.css and click Save All.

  4. Open the newStyle.css file for editing. Add the following styles to newStyles.css: 

    .header .logo{
    background: url(../images/newLogo.png) no-repeat 0px 0px;
}
 
.header .name{
    background: url(../images/newOrgName.png) no-repeat 0px 0px;
}

    Click Save All.

    Note:

    Recommended size of logo image is 70px × 70px and OrgName image is 253px x 30px.

  5. Copy the GET.jsp file from the /libs/livecycle/landingpage folder to the apps/livecycle/landingpage folder.

  6. Open the GET.jsp file for editing. Locate the following code in the GET.jsp file: 

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <% if (user == null) { %>
    <meta http-equiv="refresh" content="0;URL='/lc/libs/cq/core/content/welcome.html'" />
    <%} else { %>
    <title>Adobe&reg; LiveCycle ES4</title>
    <link type="text/css" href="/libs/livecycle/landingpage/css/style.css" rel="stylesheet">
    <% } %>
</head>

    Replace the above code with following code:  

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <% if (user == null) { %>
    <meta http-equiv="refresh" content="0;URL='/lc/libs/cq/core/content/welcome.html'" />
    <%} else { %>
    <title>Adobe&reg; LiveCycle ES4</title>
    <link type="text/css" href="/libs/livecycle/landingpage/css/style.css" rel="stylesheet">
        <!-- Entry of new style sheet at /apps/livecycle/landingpage/css -->
        <link type="text/css" href="/apps/livecycle/landingpage/css/newStyle.css" rel="stylesheet">
    <% } %>
</head>

    Click Save All.

Add support for a new language

You can add support for a new language. The following step-by-step information is to add support for language with code nw:

  1. Log in to CRXDE lite with administrator credentials. The default location of CRXDE lite is http://<server>:<port>/lc/crx/de.

  2. Copy the GET.jsp file from the /libs/livecycle/landingpage folder to the apps/livecycle/landingpage folder. 

  3. Open the GET.jsp file for editing. Locate the following code in the GET.jsp file: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
    response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
    response.setDateHeader("Expires", 0); // Proxies.
 
    String acceptLngs = request.getHeader("accept-language");
    String locale = "en";
 
    if(acceptLngs != null && !"".equals(acceptLngs.trim())) {
        acceptLngs = acceptLngs.trim().toLowerCase();
        String[] lngs = acceptLngs.split(",");
        for(String lng : lngs) {
            lng = lng.trim().substring(0,2);
            if(lng.equals("en") || lng.equals("de") || lng.equals("ja") || lng.equals("fr")) {
                locale = lng;
                break;
            }
        }
    }

    Replace the above code with following code: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%
    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
    response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
    response.setDateHeader("Expires", 0); // Proxies.
 
    String acceptLngs = request.getHeader("accept-language");
    String locale = "en";
 
    if(acceptLngs != null && !"".equals(acceptLngs.trim())) {
        acceptLngs = acceptLngs.trim().toLowerCase();
        String[] lngs = acceptLngs.split(",");
        for(String lng : lngs) {
            lng = lng.trim().substring(0,2);
            if(lng.equals("en") || lng.equals("de") || lng.equals("ja") || lng.equals("fr") || lng.equals("nw")) {
                locale = lng;
                break;
            }
        }
    }

    Click Save All.

  4. Copy the locales folder from the /libs/livecycle/landingpage folder to the /apps/livecycle/landingpage folder.

  5. Copy a subfolder from the /apps/livecycle/landingpage/locales folder to the /apps/livecycle/landingpage/locales folder. Rename the copied folder to application_nw. 

  6. Select the application_nw folder, click Properties, set value of the jcr:language property to nw.

  7. Set value of the sling:message property of every node in application_nw folder to a specific locale text. Click Save All.