Customizing your LibraryBox v2.0 Beta

Screenshot of LibraryboxRecently I created a LibraryBox v2.0 Beta and have been spending some time customizing the look and feel of the default installation to reflect how I would like to use it and to prepare it for a couple of upcoming poster presentations. Here are a few notes on what I have discovered so far that may be helpful if you are trying to do some customization.  For more detailed information and discussion about LibraryBox 2.0 that goes way beyond look and feel, check out the LibraryBox Google Group and the Advanced Setup page on the LibraryBox site.

Files and Directories

The default installation of LibraryBox v2.0 comes with a suite of files that work out of the box.  These can be found in the LibraryBox directory on your USB stick.  Many of these files can be customized to make your LibraryBox unique. The files that govern how content is displayed can be found in the Content and Shared directories below the LibraryBox directory.  Before editing them, it is a good idea to make a back-up copy of the entire contents of the LibraryBox directory and save it to your computer.  If anything goes badly wrong when editing, you will be able to restore the original version.

Content Directory

The content directory contains several files and folders as follows:

librarybox_faviconFavicon.ico is the small 16 x 16 pixel icon that appears in the browser address bar when a user is connected to one of your LibraryBox pages.  You can create your own favicon if you wish by using a favicon generator such as:

http://favicon-generator.org/

Gpl-2.0.txt file contains the text of the GNU public license.

HTML Files

The Content directory contains several static HTML files as follows:

Home Page –  index.html
Statistics Page – stats.html
About Page – about.html

php files

dl_statistics.html.php and vc_statistics.html.php are used to track downloads and visitor counts which are reported on the home and stats pages.

STL files

These files can be used to 3D print a container for your LibraryBox.

css Directory

Contains css files used by LibraryBox pages:

bootstrap-theme.css
bootstrap-theme.min.css
bootstrap.css
bootstrap.min.css
font.css
main.css
structure.css

The css directory contains style sheet files that govern the look and feel of your LibraryBox pages. Several of these css files come with the Bootstrap framework, a collection of tools that was used to create the LibraryBox website.  The font.css file makes use of the font files that are in the Content/fonts directory.

If you would like to change how content is displayed on your LibraryBox and use some of your own styles, it is advisable to create a separate stylesheet and put your additions and changes in that file rather than edit the default files.

dir-images Directory

This directory contains several small icon images that can be used to provide a visual cue to alert users about what type of file they can expect to download.

fonts Directory

This directory contains custom fonts for LibraryBox.

img Directory

lbx-logo-small-white      lbx-logo-small    menu-icon

This directory contains 3 small icon files.  Two of them are small LibraryBox logos and the other is the hamburger menu-icon used in the top right of the web pages.

Js Directory

The js directory contains javascript files.

Shared Directory

User-supplied downloadable files should be placed in the appropriate sub-directories under the Shared directory.  In the default installation the following sub-directories have already been set-up and are linked from the dropdown (hamburger menu) at the top right of the home page:

  • audio
  • software
  • text
  • video

These directories do not contain any files.  You can delete any that you do not plan to use (and remove the corresponding entry from the drop-down menu) and add directories for other types of content – data, images, etc.

For each directory that you wish to keep, you should have an index.html file that is the access page for the content in that directory.

Editing HTML Files

You can edit the HTML files by inserting the USB key into your computer and using your favourite editing software.  If you use this option you will need to move the USB key between your LibraryBox and computer to make and check edits.  If you have activated the ftp option for your LibraryBox, you may prefer to use an FTP client to download files, edit them and then ftp them back to the live LibraryBox.

Note about the name of the Content directory:  I found that although the name of this directory starts with an uppercase C, I could only get urls to work consistently by using a lowercase c.

Statistics for downloadable files

If you would like to maintain statistics for downloads from your LibraryBox, you will need to create the links to these files in a particular way.  All your urls should be prefaced with: http://librarybox.lan/dl_statistics_counter.php?DL_URL=/

Eg. http://librarybox.lan/dl_statistics_counter.php?DL_URL=/Shared/text/books/stoker_dracula.epub

 

 

3 thoughts on “Customizing your LibraryBox v2.0 Beta

  1. Thanks for the reply Sally. I’m brand new to HTML but I think i figured it out. I like the way you have your index.html, could you share that? I didn’t know how to create a separate stylesheet so I edited the existing ones. I was able to change header footer colors and use my own custom fonts. Any recommendations on learning more Web Design. Thanks again?

Leave a comment