Customizing file type icons

You can add new file extensions to an existing file type icon, or add a new file extension with a new icon. Custom file type icons display in the Activities, Files, and Communities applications. They also display in the activity stream.


  1. Optional: Turn on the customization debugging capability. For more information, see Enabling live user interface customization editing mode.
  2. Add the new icon files to the following directory:

    where customizationDir is the base directory where your customizations should go. For more information, see Determining where to save your customizations.

  3. Make a copy of the sprite-lconn.css file. You can access the file from the following directory:
    • WAS_HOME is the directory where IBM® WebSphere® Application Server is installed.
    • profile_name is the profile where you installed Connections.
    • cell_name is the cell where you installed the application.
    • application_name.ear is the name of the application EAR file. To customize interface styles that are common to all applications, use the Common.ear file.
    • application_name.war is the name of the application WAR file.
      Tip: For a list of the web application source directories that are packaged with Connections, see Application WAR files and OSGi bundles.
    • version is the version number of the Connections release plus the date and build number of the JAR file.
  4. Paste the sprite-lconn.css file into the appropriate subdirectory of the customizationDir directory:
    • When you want the edited file to be used by all the applications, post it to the customizationDir/themes/images/common directory.
    • For the file to be used by a specific application only, post it to the customizationDir/themes/images/application_name directory.
  5. Open the new copy of the sprite-lconn.css file in a text editor and do one of the following:
    • Add a new extension and associate it with an existing icon:
      1. Find the line with extensions that currently use the icon. For example, this is the line for extensions that use the "document" icon:
        .lconn-ftype16-doc,.lconn-ftype16-docm,.lconn-ftype16-docx, .... {background-position: 0 -408px;}
      2. Add the new extension in the appropriate format. Make it lowercase, and replace non-alpha numeric characters (a through z and 0 through 9) with a dash ("-"). For example, add the extension .DocFormat_2010 to the list like this:
        .lconn-ftype16-docformat-2010, .lconn-ftype16-doc,.lconn-ftype16-docm,.lconn-ftype16-docx, .... {background-position: 0 -408px;}
      3. Repeat steps a and b in the 32 and 64 pixel list. For example:
        .lconn-ftype32-docformat-2010, .lconn-ftype32-doc,.lconn-ftype32-docm,.lconn-ftype32-docx, .... {background-position: 0 -1112px;}
        .lconn-ftype64-docformat-2010, .lconn-ftype64-doc,.lconn-ftype64-docm,.lconn-ftype64-docx, .... {background-image: url(../images/ftWordProcessing64.png);}
    • Add a new extension and a new icon by creating new rules for 16, 32, and 64 pixel icons, for example:
      .lconn-ftype16-docformat-2010 { background-image:url(myCustomExtensionIcon16.png) !important; background-position: 0 0; }
      .lconn-ftype32-docformat-2010 { background-image:url(myCustomExtensionIcon32.png) !important; background-position: 0 0; }
      .lconn-ftype64-docformat-2010 { background-image:url(myCustomExtensionIcon64.png) !important; background-position: 0 0; }
  6. When you are ready to publish your changes, turn off the customization debugging capability. Test whether your changes were added successfully by restarting the applications, and then refreshing the web browser. A browser refresh only shows you your changes if you turned on debugging. See Enabling live user interface customization editing mode for more details.
  7. See Post-customization step for information about how to update the product version stamp and ensure that your users see the changes the next time that they log in to HCL Connections.