Layout

From KFMdoc
Jump to: navigation, search

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

GUI sections

Templating

bb theme
bb theme

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

Custom login

custom login screen
custom login screen

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:

Image:Keyhole.png

Personal tools