How to customize the style of the directory and file listing

1,027 views
Skip to first unread message

bdbhaiti

unread,
Jun 10, 2014, 2:04:41 PM6/10/14
to libra...@googlegroups.com
Greetings,

I've been fiddling for a while getting the appearance of the directory listing to look exactly like I want it. My main issue was that the directory listing has a fixed size and width, and looks terrible on mobile devices like smart phones and tablets. Also, I discovered that the functionality to add icons for special file types is already coded in... but it appears that a bad link prevents the icons from showing up! Here is what I've found about customizing the file and directory listing on LibraryBox 2.0, on a TL-MR3040. 

This is possible in a very basic way using custom CSS and the functionality already programmed in to the LibraryBox 2.0. Extra installations of PHP aren't necessary.

Here are some screenshots of the modified directory listing output:

(Desktop file listing)

(iPhone file listing)

How is this done?

·      Log into the LibraryBox using ssh, and modify the file /opt/piratebox/www/dir-generator.php.

o  Change line 232:
<link rel="stylesheet" href="css/bootstrap.css">

o  To the CORRECT file “/content/css/bootstrap.css”, or a custom CSS file on your LibraryBox flash drive (example):
<link rel="stylesheet" href=" /content/css/filelist.css">

o  Create a CSS file with the desired style at usb/LibraryBox/content/css/filelist.css

o  Alternatively, you can customize the other aspects and even the styles on the directory listing page straight into the lower section of the “dir-generator.php” file

How to customize it using the styles I used in the above screenshots:
  • Attached to this post is a zip file with a personalized "dir-generator.php" file and three custom CSS files. If you follow the below directions, your directory listing will appear like the one above
  • First, put your LibraryBox USB drive into a computer and copy the "dir-generator.php" file from the attached file to the root folder of your drive. Copy the three CSS files into the folder LibraryBox/Content/css
  • SSH into your LibraryBox. Copy the file "dir-generator.php" from the USB drive to the folder /opt/piratebox/www (ie, run the command: cp /mnt/usb/dir-generator.php /opt/piratebox/www)
  • That replaced the default dir-generator.php file with the one I customized, which modifies the output of the directory listing and points to the three CSS files to style the output. It also activates the filetype icons and cleans up the file listing a little.
(The three CSS files use modified styles from the Bootstrap project and the Apaxy project).

Regards,
brendan

bdbhaiti

unread,
Jun 10, 2014, 2:08:23 PM6/10/14
to libra...@googlegroups.com
Sorry, I forgot to attach the zipped file with the modified files. Here they are, attached.
CustomCSSDirList.zip

bdbhaiti

unread,
Jun 10, 2014, 2:35:49 PM6/10/14
to libra...@googlegroups.com
Also, there's something really finicky about the relative links to the css files. The original line that seems to work is:

<link rel="stylesheet" href="css/bootstrap.css">

However, when you add your own CSS links in the content folder, you have to prefix the path like so:

<link href="/content/css/bootstrap2.css" rel="stylesheet">




Sean

unread,
Jul 4, 2014, 9:38:43 AM7/4/14
to libra...@googlegroups.com
Hello,
I have applied your fix and it looks waaaaay better but it does not look exactly like yours. I am missing the lines that separate the files. It is just white space. I think the lines in your picture look better. Any ideas? Thanks.

TheSFReader

unread,
Jul 6, 2014, 11:21:38 AM7/6/14
to libra...@googlegroups.com
Thanks too, looks much better indeed !

Rüdiger Barth

unread,
Aug 23, 2014, 3:03:53 PM8/23/14
to libra...@googlegroups.com
It works fine. Thank you very much :-)

Davey Williams

unread,
Jan 14, 2015, 3:09:37 AM1/14/15
to libra...@googlegroups.com
Thank you for this!
The new look is much, much better!  I'd like very much to enhance it a bit more though, especially for iThings...

Something like the big BACK button in place of "Parent Directory" like what we see at the top of this Google Groups conversation.
I'd also like to add a way of making the font and icon size a bit bigger, not sure about others, but i generally wouldn't have more than 10-12 things in a folder anyways...

I take a crack at the CSS, but would be grateful for any advice or assistance with this!

Thanks again brendan! 
Well Done!
Reply all
Reply to author
Forward
0 new messages