Customizing Icons

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

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;
   }

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;
}

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;
}

Back to top