Ok.
Now, i edited Live template and included into a some things:
General:- better and more icons for files and folders.
- browsabletreefolders active navigation menu (from HFS Terayon)
- mp3 streaming (from HFS Terayon)
- image preview highslide (from HFS Terayon)
Little:- now, you can see on each page info about dir and files - like "№ folder(s), № file(s) - Total: № Bites" [before sorting menu] (from HFS Terayon)
- you can add comment to the folder or file
- you also can use additional folder icons for change all subfolder for any folder.
- you can use real thumbnails for small preview without downloading picture.
Use 88x88px thumbnails.- for images inactive name-link menu, only view with highslide or download with "save as"...
Of course, u see usual comment, look like like:
Click on img for view
or right click and "Save as"
- text "loading...", when you load highslide picture view replaced with small search picture
- fix upload page background bug and status page bug (for Opera)
- system comments (like "folder", "size") and file-folder comments now is no like link. Only text. For link used item name and item icon
- added download raitng (3 small star a right after download count). It begin after 10 download. I wait for real users raitng - this is no complete thing. But now i dont know how realise.
A some preview:
And you can see result at
http://raproid.mine.nu/ if my cimputer stiil on
Download link: HFS Live 0.2.5 Power+ (edited by meeeeeeyaowwww) 
(1,86 Mb)
Mirror 1 Mirror 2Setup: - import template *.tpl
- delete "img" folder from root in HFS window (if u haved already)
- put "template" folder on root like "real folder". Hide, Hide tree, write in "dont count mask..." that - *.bmp;*.gif;*.jpg;*.jpeg;*.png;*.ico;*.html;*.js;*.swf
- create "thumb" folder on your harddisc for thumbnails and put on root like "real folder". Hide, Hide tree, write in "dont count mask..." that - *.jpg;*.jpeg;*.gif;*.png;*.bmp;*.psd;*.ico;
Important:1. Thumbnails - it real pict 88x88, which you must create youself (use Acdsee batch resing: Crtl+R on files) and put into "thumb" folder on your harddisc. If thumbnail not exist template show only bg pict and text on this "No thumb found!!".
By default, template use for thumbnails folder named "thumb" on root dir of your site.
I propose divide thumbs by media and style types - new folder for each type or style.
Explaining:For exmpl, you have divided folders for content type - like music dir for all music and images dir for all image and put any subfolders into their.
Your default template for images show all thumbnails from "thumb' dir from root. So, we can change this dir by small writing:
Now, default template is
[file.jpg]
<tr><td width="16px" align="center" ><a href="%item-url%"> </a>
<script language="javascript">
var c='%item-name%';
switch ( c.substr( c.lastIndexOf('.') ) .toLowerCase() )
{
case '.jpg' : document.write('<table cellspacing="0" cellpadding="0" style="width:114px;height:114px;background-image:url(/template/img/lit_th_bg_white.jpg)" align="center" ><tr><td valign="middle" align="center" ><a href="%item-url%" class="highslide" onclick="return hs.expand(this)"><img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" /></a></td></tr></table>');break;
}
</script>
</td>
<td>
<font id="font1"><b>%item-name% %new% </b></font>
<br/>
<font id="font3">%item-modified%
<br/>
%item-size% | %item-dl-count% downloaded <script language="javascript">var top='%item-dl-count%'; if (top > 10) { document.write ('<img src="/template/img/new.gif"><img src="/template/img/new.gif"><img src="/template/img/new.gif">') }</script>
<br /><b>%comment%</b>
</font>
<font id="font4">Click on img for view
<br />
or right click and "Save as"</font></a>
</div>
</font>
</td>
</tr>
[file.jpeg]
<tr><td width="16px" align="center" ><a href="%item-url%"> </a>
<script language="javascript">
var c='%item-name%';
switch ( c.substr( c.lastIndexOf('.') ) .toLowerCase() )
{
case '.jpeg' : document.write('<table cellspacing="0" cellpadding="0" style="width:114px;height:114px;background-image:url(/template/img/lit_th_bg_white.jpg)" align="center" ><tr><td valign="middle" align="center" ><a href="%item-url%" class="highslide" onclick="return hs.expand(this)"><img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" /></a></td></tr></table>');break;
}
</script>
</td>
<td>
<font id="font1"><b>%item-name% %new% </b></font>
<br/>
<font id="font3">%item-modified%
<br/>
%item-size% | %item-dl-count% downloaded <script language="javascript">var top='%item-dl-count%'; if (top > 10) { document.write ('<img src="/template/img/new.gif"><img src="/template/img/new.gif"><img src="/template/img/new.gif">') }</script>
<br /><b>%comment%</b>
</font>
<font id="font4">Click on img for view
<br />
or right click and "Save as"</font></a>
</div>
</font>
</td>
</tr>
[file.gif]
<tr><td width="16px" align="center" ><a href="%item-url%"> </a>
<script language="javascript">
var c='%item-name%';
switch ( c.substr( c.lastIndexOf('.') ) .toLowerCase() )
{
case '.gif' : document.write('<table cellspacing="0" cellpadding="0" style="width:114px;height:114px;background-image:url(/template/img/lit_th_bg_white.jpg)" align="center" ><tr><td valign="middle" align="center" ><a href="%item-url%" class="highslide" onclick="return hs.expand(this)"><img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" /></a></td></tr></table>');break;
}
</script>
</td>
<td>
<font id="font1"><b>%item-name% %new% </b></font>
<br/>
<font id="font3">%item-modified%
<br/>
%item-size% | %item-dl-count% downloaded <script language="javascript">var top='%item-dl-count%'; if (top > 10) { document.write ('<img src="/template/img/new.gif"><img src="/template/img/new.gif"><img src="/template/img/new.gif">') }</script>
<br /><b>%comment%</b>
</font>
<font id="font4">Click on img for view
<br />
or right click and "Save as"</font></a>
</div>
</font>
</td>
</tr>
[file.png]
<tr><td width="16px" align="center" ><a href="%item-url%"> </a>
<script language="javascript">
var c='%item-name%';
switch ( c.substr( c.lastIndexOf('.') ) .toLowerCase() )
{
case '.png' : document.write('<table cellspacing="0" cellpadding="0" style="width:114px;height:114px;background-image:url(/template/img/lit_th_bg_white.jpg)" align="center" ><tr><td valign="middle" align="center" ><a href="%item-url%" class="highslide" onclick="return hs.expand(this)"><img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" /></a></td></tr></table>');break;
}
</script>
</td>
<td>
<font id="font1"><b>%item-name% %new% </b></font>
<br/>
<font id="font3">%item-modified%
<br/>
%item-size% | %item-dl-count% downloaded <script language="javascript">var top='%item-dl-count%'; if (top > 10) { document.write ('<img src="/template/img/new.gif"><img src="/template/img/new.gif"><img src="/template/img/new.gif">') }</script>
<br /><b>%comment%</b>
</font>
<font id="font4">Click on img for view
<br />
or right click and "Save as"</font></a>
</div>
</font>
</td>
</tr>
[file.bmp]
<tr><td width="16px" align="center" ><a href="%item-url%"> </a>
<script language="javascript">
var c='%item-name%';
switch ( c.substr( c.lastIndexOf('.') ) .toLowerCase() )
{
case '.bmp' : document.write('<table cellspacing="0" cellpadding="0" style="width:114px;height:114px;background-image:url(/template/img/lit_th_bg_white.jpg)" align="center" ><tr><td valign="middle" align="center" ><a href="%item-url%" class="highslide" onclick="return hs.expand(this)"><img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" /></a></td></tr></table>');break;
}
</script>
</td>
<td>
<font id="font1"><b>%item-name% %new% </b></font>
<br/>
<font id="font3">%item-modified%
<br/>
%item-size% | %item-dl-count% downloaded <script language="javascript">var top='%item-dl-count%'; if (top > 10) { document.write ('<img src="/template/img/new.gif"><img src="/template/img/new.gif"><img src="/template/img/new.gif">') }</script>
<br /><b>%comment%</b>
</font>
<font id="font4">Click on img for view
<br />
or right click and "Save as"</font></a>
</div>
</font>
</td>
</tr>
Sorry, if it look like big. )) but it no difficult.
We interesting only that string:
<img src="/thumb/%item-name%" border="0" alt="" width="88" height="88" alt="No thumb found!!" title="Click here to enlarge the preview" />
So, see - the way to thimbnails dir is "/thumb/%item-name%".
You can add any path liked - "/thumb/images/%item-name%", or "/thumb/images/wallpaper/%item-name%", or "/thumb/music/house/%item-name%" or anything.
Change all sames values in this code for (5, how i member).
Click on folder in hfs window, choose "diff template" and put changed code into new small opened window.
It's fine.
Comment:It's easy, then use "%folder-encoded%thumb/%item-name%" be cause u use one thumb folder and can create all subfolders in that.
With "%folder-encoded%thumb/%item-name%" value you must create a "thumb" folder with thumbnail in folder, where placed a picture. It's gonna be crazy...
2. Change all subfolders icon in any folder wth content type filter.
Explaining:For exmpl, we have one IMAGES folder, where placed in subfolders all pictures, photo, papers, e.t.c.
Default code for folder icon is:
[folder]
<tr><td width="16px" align="center"><a href="%item-url%"> <img src="/template/img/folders_ico/f_eyes.png" border="0" alt="" width="40" height="40"></a></td><td class="alignleft"><a href="%item-url%"><font color ="#787878"><b>%item-name% %new%</b></font></a><br /><font id="font3">Folder<br />%comment%</font></td></tr>
We interesting for this string:
<img src="/template/img/way/folder_img.png" border="0" alt="" width="40" height="40">
Value "/template/img/way/folder_img.png".
Change icon way and name to any, like "/template/img/folders_ico/f_eyes.png" or anything esle.
Put changed code in opened "Diff template" window from folder context menu.
Comment:See icon picture's width and height parametrs - if it no 40x40 change width="40" height="40" to importants parametrs.
3. For comment file or folder use "Comments" in folder or file context menu.
4. By default for thubm bg use *.jpg picture be cause is smaller, then alternative *.png.
If you like transparent, you can change thumbnail's background from jpg with withness bg to png with real transparent bg.
See this pict between additional icons. So, after changing edit template - find all "lit_thumb_white.jpg" and replace with name of new picture
Ooook. Have fun and sooo thanks to Gaint and Stiven. For chrno too.
And sorry for flvplayer.swf. I forgot about this. it'll be include...
