Customizing Icons for the Create Space Action in Contentspace (Deprecated)

In LiveCycle Contentspace (Deprecated), you can select different icons when you create a new space. Different icons are useful for providing a visual cue of what is in the space. The default icon is a folder, but you can change the default icon to be different icon and even add to the list of icons available when you create a space. Using your own icons is useful for providing semantics to a user.

Note: Adobe is migrating Adobe® LiveCycle® Content Services ES customers to the Content Repository built on the modern, modular CRX architecture, acquired during the Adobe acquisition of Day Software. The Content Repository is provided with LiveCycle Foundation and is available as of the LiveCycle ES3 release.

For example, a financial institution implementing Contentspace may want custom icons for spaces to represent the types of files it has, such as savings accounts or mortgages. The generic folder icons with a CD or star on them are not adequate. You can add additional icons to better describe the space that is created or you can customize the default icon, as shown in the illustration below:

View full size graphic

    Summary of steps

    You must complete these steps to customize the default icons or add new icons when users create a space.

    1. Set up your development environment. (See Setting Up to Customize LiveCycle Contentspace (deprecated).)

    2. Add the icon to an existing action. (See Adding icons to an existing action.)

    3. Deploy your customization. (See Deploying a Customized Contentspace (Deprecated).)

    Adding icons to an existing action

    To add icons to an existing action, you must first determine the name of the action. You can determine the name of an action by finding the image that belongs to the action and then finding the definition of the action.

    The procedure below shows how to find the Create Space action, add a new icon to the list of icons, and override the default icon.

    To add an icon to an action:

    1. Determine the name of the action to use by using the name of the associated icon.

      • In My Home, click Create > Create space.

      • Right-click the first icon in the Icon list and select Properties.

      • In the Properties dialog box, look at the Address URL. For example, if you right-click the first icon and select Properties, you will see that the URL is http://[lcserver:8080]/contentspace/images/icons/space-icon-default.gif. This location means that the image name is space-icon-default.gif and it is located in the images/icons folder from the root level in your development environment.

    2. From the root level in your development environment, go to the WEB-INF/classes/alfresco folder.

    3. Using an editor, open the web-client-config.xml file and search for name of the icon you found in step <HyperText>1, such as space-icon-default.gif. You should see a section that defines all the icons that are used for that action.

    4. Select and copy the XML code from the starting <config> tag to the closing </config> tag. The following is the XML code you select and copy.

        <!-- This config sections below hold all the icons choices --> 
    <!-- displayed to users when creating various types of spaces --> 
    <!-- in the client. --> 
     
    <!-- NOTE: The conditions below are all string based and --> 
    <!-- will therefore not be found when using Node based --> 
    <!-- lookups, this also means the cm: can not be presumed. --> 
     
    <config evaluator="string-compare" condition="cm:folder icons"> 
        <icons> 
            <icon name="space-icon-default" path="/images/icons/space-icon-default.gif" /> 
            <icon name="space-icon-star" path="/images/icons/space-icon-star.gif" /> 
            <icon name="space-icon-doc" path="/images/icons/space-icon-doc.gif" /> 
            <icon name="space-icon-pen" path="/images/icons/space-icon-pen.gif" /> 
            <icon name="space-icon-cd" path="/images/icons/space-icon-cd.gif" /> 
            <icon name="space-icon-image" path="/images/icons/space-icon-image.gif" /> 
        </icons> 
    </config>

    1. From the root level in your development environment, go to the WEB-INF/classes/alfresco/extension folder.

    2. Using an editor, open web-client-config-custom.xml file and at the end of the file, before the closing </alfresco-config> tag, add the XML block you copied from the last step.

    3. In the opening <config> tag, add the replace attribute and set it to true.

        <config evaluator="string-compare" condition="cm:folder icons" 
                 replace="true"> 
        <icons> 
            <icon name="space-icon-default" path="/images/icons/space-icon-finance-savings.gif" /> 
            <icon name="space-icon-finance-savings" path="/images/icons/financesSavings.gif" /> 
            <icon name="space-icon-star" path="/images/icons/space-icon-star.gif" /> 
            <icon name="space-icon-doc" path="/images/icons/space-icon-doc.gif" /> 
            <icon name="space-icon-pen" path="/images/icons/space-icon-pen.gif" /> 
            <icon name="space-icon-cd" path="/images/icons/space-icon-cd.gif" /> 
            <icon name="space-icon-image" path="/images/icons/space-icon-image.gif" /> 
        </icons> 
    </config> 
     
    </alfresco-config>

    1. Copy the first <icon/> block and paste it immediately below it.

    2. Change the icon name to a new name. The name you choose is important because the images associated with that name use a special naming convention described in the next step.

    3. Specify the name and location of the image you want to use for the path attribute for the <icon> tag.

    4. Save the web-client-config-custom.xml file.

    5. Copy the custom icon you want to use to the images/icons folder located in your development environment. You need to copy four versions of each image that include the following sizes and formats, with a naming convention where [image name] is the name of your GIF and PNG files:

      • 16 x 16 pixel GIF that is named [image name]-16.gif

      • 32x32 pixel GIF that is named [image name].gif

      • 16x16 pixel PNG that is named [image name]-16.png

      • 64x64 pixel PNG that is named [image name]-64.png

      The naming convention is very important for images to be displayed. For example, if you named your custom icon space-icon-finance-savings, you need to create images with the following names:

      • space-icon-finance-savings-16.gif

      • space-icon-finance-savings.gif

      • space-icon-finance-savings-16.png

      • space-icon-finance-savings-64.png

    6. To replace the default image used when creating a space, replace the following images with your own image:

      • space-icon-default-16.gif

      • space-icon-default.gif

      • space-icon-default-16.png

      • space-icon-default-64.png

    // Ethnio survey code removed