The layout of KFM can be controlled in various ways. The basic idea behind the layout theming. A theme can be added to KFM by adding a theme to the themes folder. Example themes can be found at http://www.companytools.nl/kfm-themes
It is possible to create your own layout. If there is a file called template.html, this file will be used for the layout of KFM. Elements that will be dynamically controlled by KFM for example are (selected by id):
<div id="kfm_search_wrapper" style="padding:3px;"></div> <span id="cwd_display"></span> <span id="folder_info"></span> <span id="documents_loader"></span> <div id="kfm_directories"></div> <div id="documents_body"></div> <div id="kfm_upload_wrapper"> </div>
Links to admin tabs can be generated by using the tab name like:
<a href="{$setting.kfm_ufl}admin/index.php#My_tab">My admin plugin</a>
where spaces are replaced by underscores
It is possible to create a custom login for KFM. Mine is created by adding a file login.php to the KFM root with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body{
background-color:black;
color: white;
}
div#container{
width: 700px;
height: 563px;
margin: 100px auto;
background-image: url(keyhole.png);
background-repeat: no-repeat;
}
div#kfmtext{
float:right;
font-size: 2em;
}
div#formcontainer{
clear:both;
float:right;
margin-top: 300px;
margin-right:20px;
}
</style>
<title>File manager login</title>
</head>
<body>
<div id="container">
<div id="kfmtext">File manager login</div>
<div id="formcontainer">
<form method="post" action="./">
<table>
<tr>
<td>Username</td><td><input name="username" /></td>
</tr>
<tr>
<td>Password</td><td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Login" /></td>
</tr>
</table>
</form>
</div><!--formcontainer-->
<div id="errors">
<?php if($err)echo $err; ?>
</div><!--errors-->
</div><!--container-->
</body>
</html>
This also requires the image keyhole.png in the KFM root: