Styling, JavaScript Programming Example of Styling in File Manager

JavaScript Programming Example of Styling in File Manager

Get the coding sample for styling items in File Manager. With this piece of code you can set background colors to items. Don't miss out on the chance to use free Webix programming examples for speeding up the process of web development.

JS Code

webix.ready(function(){
  webix.ui({
    view: "filemanager",
    id: "fmanager"
  });
  $$("fmanager").load("https://docs.webix.com/samples/64_file_manager/common/data.php");
});

HTML Code

<!--
<link rel="stylesheet" type="text/css" href="https://docs.webix.com/samples/64_file_manager/common/style.css">
-->
  
<style>
/*modes button*/
.webix_fmanager_modes .webix_selected{
	background-color: #bbdefb !important;
	border:1px solid #2196f3 !important;
}

/*Table*/
.webix_fmanager_table .webix_row_select {
	background: #2196f3 !important;
}
.webix_blur.webix_fmanager_table .webix_row_select{
	background-color: #bbdefb !important;
}

/*Tree*/
.webix_fmanager_tree .webix_selected span {
	background: #2196f3 !important;
}
.webix_blur.webix_fmanager_tree .webix_selected span{
	background-color: #bbdefb !important;
	border:1px solid #2196f3 !important;
}

/*Files view*/
.webix_fmanager_files .webix_selected .webix_fmanager_file {
	background: #2196f3;
}
.webix_blur.webix_fmanager_files .webix_selected .webix_fmanager_file{
	background-color: #bbdefb;
}
</style>