Customizing file icons

Icons in Feng Office are determined by the file's MIME type in the first place or the extension if no icon is set for the MIME type. If no icon is defined for a file's MIME type or extension, then a “blank file” icon is used.

To define a new icon for a MIME type (e.g., application/sample), you have to do this:

1) Add an image for the mime type that is 16×16 pixels in size to 'public/assets/themes/default/images/16×16/types' and name it 'application-sample.png'. The general rule for the filename is to replace slashes with dashes. The format doesn't need to be PNG; it could be GIF or another image format supported by browsers.

2) Add an image for the file type that is 48×48 pixels in size to 'public/assets/themes/default/images/48×48/types' and name it 'application-sample.png'

3) In the file 'public/assets/themes/default/stylesheets/custom.css' (if this file doesn't exist, create it), add a couple of CSS rules for the file type, like this:

  .ico-application-sample {
      background-image: URL(../images/16x16/types/application-sample.png);
  }
  .ico-large-application-sample {
      background-image: url(../images/48x48/types/application-sample.png);
  }

4) If you want to define icons for an extension (e.g., .smpl), you would have to add these CSS rules instead:

  .ico-ext-smpl {
      background-image: URL(../images/16x16/types/application-sample.png);
  }
  .ico-large-ext-smpl {
      background-image: url(../images/48x48/types/application-sample.png);
  }

5) Refresh your browser