From rejetto wiki
Revision as of 02:01, 2 February 2010 by (talk) (→‎HTML Editor and Templates: F5 is simply refresh.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

HFS is an extremely feature-rich application. This section explains how to use some of the most popular features and options.

HTML Editor and Templates

Warning Some users have reported problems when displaying changes to sites in their default browsers. These problems can normally be solved by refreshing the browser cache ("Ctrl+F5" on most systems).

Although the default HFS template is perfectly satisfactory for many users, HFS makes it very easy to use a different template which can dramatically change the "look-and-feel" of your site. You can experiment very freely, since the HFS Editor includes a "Restore default" facilty, which imports the default *.tpl file supplied with HFS.

For example, here is the basic look of the "example site" viewed in Firefox:


And here is the same site after applying a new template:


(Note that the above pictures have been shrunk and truncated so that they are easy to view. In reality, the graph in the "black" template for example, displays (and works) perfectly.)

Modifying Templates

It is much easier to modify an existing template, rather than attempting to create one from scratch. You can find good examples of templates to use at the user Forum and at this site.

You should be aware that an HFS template ( a *.tpl file) contains the raw elements from which HFS builds the final HTML. Strictly speaking, it is not actually HTML, but you'll find that the HFS editor seamlessly handles verified HTML files from the above sites if you change the extension to *.tpl.

Before starting, it is good practice to make a folder named "Templates" under your "HFS" folder. Eg. C:\HFS\Templates.

Follow this procedure to apply the "black" template illustrated above.

  1. Download the file named "Beta Black Template v3.htm" from Templates, and copy (or move) it to "Templates". If necessary, rename this file to "Beta Black Template v3.tpl" (ie. change the file extension) so the HTML editor can recognize it.
  2. In HFS, select "Edit HTML template" which opens the editor and automatically loads the current template (the default if you haven't made any changes).
  3. Click "Import" and, if necessary, navigate to C:\HFS\Templates. Select "Beta Black Template v3.tpl" and click Ok.
  4. When the new template is loaded into the editor, click "Apply", and then "Ok" (to dismiss the editor).
  5. In the HFS window, select root (/), right-click and then click "Browse it" to see the effect of your changes. Remember to refresh the browser cache ("Ctrl+F5" on most systems), if necessary.

Changing Templates

You may now choose to make some small changes to the template to see their effects. To do this:

  1. In HFS, select "Edit HTML template" which opens the editor and automatically loads the current template ("Beta Black Template v3.tpl" if you haven't made any changes).
  2. Navigate to the style section of the template, and find this line: "body, .row { color: #000000 }"
  3. In HTML, colors are normally identified by their hex value.
    "0D8BE9" represents a reasonably classic blue. Change the above line to this: "body, .row { color: #0D8BE9 }" and click "Apply".
  4. Go back to the main HFS window, select root (/), right-click and then click "Browse it" to see the effect of your changes.
  5. You'll notice that the entries in this part of the site are now displayed in blue. Remember to refresh the browser cache ("Ctrl+F5" on most systems), if necessary.
  6. If you wish to keep this change permanent in the template, click "Ok" in the HTML editor. If you don't want to keep the change, click "Undo".


The above illustrates the principles of a method for safely editing an HTML template. The main alternative is to save ("Export") the different template versions as you apply and verify changes.

Background color

One of the most dramatic visual changes is to change the background color. This is controlled by this line in the style section: body { margin:0; background-color:#51595B; padding:10px; color:#FFFFFF; }. Try changing the color value here to "#0D8BE9".

Error creating thumbnail: File missing

Click to enlarge

Not everybody is familiar with hex color codes. You may care to download the free Pixeur application. This "pick" tool allows you to click anywhere on your screen and display the corresponding hex value (among other things).

Advanced example

The following illustration shows the template called "!!!ledufe.tpl".

Error creating thumbnail: File missing

At first glance it may just look like a fairly clean variation of the default template, but it actually uses some very advanced features.
If you click on the "Google" logo towards the bottom of the screen for example, your browser goes directly to the Google site where you can immediately perform Internet searches.
The central part of this webpage:

  • Shows whether you are logged into the "Hamachi" network, (and permits autologin if you're offline).
  • Allows you to invoke and sign-in to Skype messenger and use Skype phone.
  • Lets you sign into Windows messenger.
  • Lets you access other Microsoft services.

The toolbar across the top allows access to further features, including "Site" navigation, further "Hosted Sites", and to change the type of "CSS" that actually constructs this webpage within the HFS browser, a site "Search" box, and this:
This lets you use a self-made set of "HFS Tools", manipulate your browser's bookmarks or "Favorites", and lets you stream music files to site visitors using your favorite MP3 player.

There are many examples of good templates, together with notes about their construction, in the Template Examples Gallery.

Running HFS as a Windows service

There are several good reasons to run HFS as a Windows service.
It ensures that HFS:

  • Starts before login and runs continually across multiple sessions.
  • Is secure against unintentional or malicious shutdown.
  • Can be automatically restarted in the event of failure.
  • Can be run at a specific time.
  • Can be executed with specific user rights and priority.

There are also several methods to achieve this. Under XP, the easiest way is to download this tray-icon utility by ledufe. It only works if you have Microsoft's .NET Framework 2.0, freely available at Microsoft website.

Extract the file from the zip archive, and place it in a suitable folder, eg. C:\HFS. Double-click hfs2Service.exe to display:
You'll notice that two files are added to the folder, named HFS-Service.exe and HFS-Service.ini.
Click "Create" to install the service, and then "Start". The confirmation message "RUNNING" is displayed, and the HFS icon is shown in the Notification Area.
In Xp, you can confirm that itis working properly by checking "Services" under "Administrator Tools" in the Control Panel. 091.png


New versions of HFS are released fairly frequently. Although you can always manually download the latest version from Download, the easiest way is use:
"Check for news/updates".
There is no need to stop your HFS server, or make any other preparations, although it is usually good practice to use "Save file system" just before installing a new version. If a new version is available, you first see an information box like this:
Click "OK":
Click "OK" to start the download and installation process. A "Dos box" like the following is displayed:

After a very brief delay, you'll notice your server has been automatically stopped and restarted, and now displays the new version number in the title bar. It is good practice to check that everything is working properly by using "Self Test".

See HFS: Command line parameters for more information about operating HFS in this mode.