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: replace slashes with dashes. The format doesn't need to be PNG, it could be GIF or other 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 file 'public/assets/themes/default/stylesheets/custom.css' (if this file doesn't exist create it) add a couple of CSS rule 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 this 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