+

Search Tips   |   Advanced Search

Customize file type icons

We 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. Turn on the customization debugging capability. See Enable and disable customization debugging.

  2. Add the new icon files to the following directory:
    customizationDir/themes/images

    where customizationDir is the base directory where the customizations should go. See Determine where to save the customizations.

  3. Make a copy of the sprite-lconn.css file. We can access the file from the following directory:
    WAS_HOME/profiles/profile_name/installedApps/cell_name/application_name.ear/application_name.war/nav/common/styles/base

    where:

    • WAS_HOME is the directory where IBM WebSphere Application Server is installed.

    • profile_name is the profile where you installed IBM 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.

      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 we are ready to publish the changes, turn off the customization debugging capability. Test whether the changes were added successfully by restarting the applications, and then refreshing the web browser. A browser refresh only shows you the changes if you turned on debugging. See Enable customization debugging for more details.

  7. See Required post-customization step for information about how to update the product version stamp and ensure that your users see the changes the next time they log in to IBM Connections.


Parent topic:
Customize images


Related:
Configure MIME types for Files
Enable live user interface customization editing mode
Determine where to save the customizations
Required post-customization step
Application WAR files and OSGi bundles