Customize file type icons 

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 Files and Communities applications.


  1. Make a copy of the sprite-lconn.css file. You can access the file from the following directory:


      where <WAS_home> is the directory to which you installed the WebSphere Application Server, <profile_name> is the profile to which you installed one of the IBM Connections applications, <cell_name> is the cell to which you installed the application, <application_name.ear> is the EAR file name for the application, and <application_name.war> is one of the following files names:

      • Activities: oawebui.war

      • Blogs: blogs.war

      • Bookmarks: dogear.webui.war

      • Communities: comm.web.war

      • Files: qkr.share.files.war

      • Forums: forum.web.war

      • Home page: homepage.war

      • News: news.web.war

      • Profiles:

      • Search: search.war

      • Wikis:

  2. Paste the file into the appropriate subdirectory of the customization directory. It makes sense to store the edited sprite-lconn.css file in the common directory so it will be used by all applications, but you can save it in the customization subdirectory for an individual application to apply it to that application only if you want. See Customize the user interface for more details. To copy it to the common directory, paste it here:


  3. 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 lower case, 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; }

  4. Add the icon files to the following directory:

  5. Update the version stamp and restart the application. See the topic Required post-customization step.

      File type icons
      These icons are provided by IBM Connections for displaying files.

Parent topic

Customize the user interface

Related tasks
Configure MIME types for Files
Required post-customization step

November 15, 2011 9:20:03 AM


Nov 15, 2011 9:20:03 AM Changed forums.web.war to forum.web.war. 3 Oct 21, 2011 9:32:06 AM 2 Oct 21, 2011 9:27:07 AM 1