Customizing Icons

This documentation is for Vault v2.5. Please go to docs.dhtmlx.com/vault/ to see documentation for the current version of dhtmlxVault.

Default icons

  • Icons are stored in the icons object.
  • By default, vault provides icons for a number of extensions.
  • Similar files extensions are combined into groups, for example: group "icon_image" contains jpg,gif,png... extensions and for all these extensions in the group, vault will use the same icon.
  • You can alter any existing group and create new ones.
  • For all other extensions default icon used.
Group Icon Extensions
icon_image jpg, jpeg, gif, png, bmp, tiff, pcx, svg, ico
icon_psd psd
icon_video avi, mpg, mpeg, rm, move, mov, mkv, flv, f4v, mp4, 3gp
icon_audio wav, aiff, au, mp3, aac, wma, ogg, flac, ape, wv, m4a, mid, midi
icon_arch rar, zip, tar, tgz, arj, gzip, bzip2, 7z, ace, apk, deb
icon_text txt, nfo, djvu, xml
icon_html htm, html
icon_doc doc, docx, rtf, odt
icon_pdf pdf, ps
icon_xls xls
icon_exe exe
icon_dmg dmg
for all other formats default icon used

These icons are licensed under a Creative Commons Attribution 3.0 License, http://fatcow.com/

Custom icons through prototype

  1. Change existing group (add new icons, remove the current ones)
    Changes will affect all vault instances, call before init:
    // remove existing group
    dhtmlXVaultObject.prototype.icons.icon_image = [];
     
    // alter existing group (remove several icons or add new ones)
    dhtmlXVaultObject.prototype.icons.icon_image = ["jpg","png","bmp"];
     
    // add new group
    dhtmlXVaultObject.prototype.icons.icon_iso = ["iso","nrg"];
     
    // change default icon
    dhtmlXVaultObject.prototype.icon_def = "other_def_icon";
  2. To change icons for existing groups you need to add css rule
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_group_name div.dhx_vault_all_icons:
    .dhx_vault_dhx_skyblue div.dhx_vault_files 
    div.dhx_vault_file_icon.dhx_vault_icon_image div.dhx_vault_all_icons {
        background-image: url("path_to_file/icon_custom.gif");
        width: 32px;
        height: 32px;
    }
  3. For new groups you also need to add new css rule
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_group_name div.dhx_vault_all_icons:
    .dhx_vault_dhx_skyblue div.dhx_vault_files 
    div.dhx_vault_file_icon.dhx_vault_icon_iso div.dhx_vault_all_icons {
        background-image: url("path_to_file/icon_iso.gif");
        width: 32px;
        height: 32px;
    }
  4. For default icon you can change css only. Pay attention: if you change the default icon css name, you need to use it in css as well:
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_icon_def div.dhx_vault_all_icons
    .dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file_icon.dhx_vault_icon_def
    div.dhx_vault_all_icons {
        background-image: url("path_to_file/other_def_icon.gif");
        width: 32px;
        height: 32px;
    }

Related sample:  

Custom icons for existing instance

  • After init vault has a key in the icons collection where ext-group pairs are exist
  • Default icon located in conf.icon_def
  • To change group you need to remove the key, add new pair or exit existing
  • All new groups required css altering (please see examples for css above)
// init vault
var myVault = new dhtmlXVaultObject({...});
 
// remove several icons (i.e. default icon will used for them)
delete myVault.conf.icons.txt;
delete myVault.conf.icons.jpg;
delete myVault.conf.icons.png;
 
// change group for existing extension or add new extension
myVault.conf.icons.txt = "custom_icon";
myVault.conf.icons.iso = "group_iso";
 
// change default icon
myVault.conf.icon_def = "other_def_icon";

Custom icons for uploading and errors

css for uploading

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_uploading div.dhx_vault_file_icon div.dhx_vault_all_icons

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_uploading 
div.dhx_vault_file_icon div.dhx_vault_all_icons {
    background-image: url("icon_loading.gif");
    width: 32px;
    height: 32px;
    left: 0px;
}

Related sample:  

css for errors

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_fail div.dhx_vault_file_icon div.dhx_vault_all_icons

.dhx_vault_dhx_skyblue div.dhx_vault_files div.dhx_vault_file.dhx_vault_file_fail
div.dhx_vault_file_icon div.dhx_vault_all_icons {
    background-image: url("icon_error.gif");
    width: 32px;
    height: 32px;
    left: 0px;
}

Related sample:  

Back to top