Refinements: Difference between revisions
(→HTML Editor and Templates: F5 is simply refresh.) |
|||
| (80 intermediate revisions by 9 users not shown) | |||
| Line 3: | Line 3: | ||
===HTML Editor and Templates=== | ===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 ("F5" on most systems. | '''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 *. | 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: | For example, here is the basic look of the "example site" viewed in Firefox: | ||
| Line 17: | Line 17: | ||
(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.) | (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.) | ||
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 | =====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 [http://www.rejetto.com/forum/index.php?board=27.0 Forum] and at this [http://ledufe.no-ip.info:2222/HFS-templates 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. | 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. | Follow this procedure to apply the "black" template illustrated above. | ||
# Download the file named "Beta Black Template v3.htm" from | # Download the file named "Beta Black Template v3.htm" from [http://ledufe.no-ip.info:2222/HFS-templates/ 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. | ||
# 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). | # 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). | ||
#Click "Import" and, if necessary, navigate to C:\HFS\Templates. Select "Beta Black Template v3.tpl" and click Ok. | #Click "Import" and, if necessary, navigate to C:\HFS\Templates. Select "Beta Black Template v3.tpl" and click Ok. | ||
#When the new template is loaded into the editor, click "Apply", and then " | #When the new template is loaded into the editor, click "Apply", and then "Ok" (to dismiss the editor). | ||
#In the HFS window, select root (/), right-click and then click "Browse it" to see the effect of your changes. | #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: | |||
# 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). | |||
# Navigate to the style section of the template, and find this line: "<nowiki>body, .row { color: #000000 }</nowiki>" | |||
# In HTML, colors are normally identified by their hex value. <br>"0D8BE9" represents a reasonably classic blue. Change the above line to this: "<nowiki>body, .row { color: #0D8BE9 }</nowiki>" and click "Apply". | |||
# Go back to the main HFS window, select root (/), right-click and then click "Browse it" to see the effect of your changes. | |||
# 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. | |||
# 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". | |||
[[Image:067.png]] | |||
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". | |||
[[Image:068.png|thumbnail|left|100px|]] <br> | |||
Click to enlarge | |||
<br> | |||
<br> | |||
<br> | |||
<br> | |||
<br><br> | |||
Not everybody is familiar with hex color codes. You may care to download the free [http://www.veign.com/download_app.asp?app=107 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".<br> | ||
[[Image:071.PNG|thumbnail|left|100px|]] <br> | |||
<br> | |||
<br> | |||
<br> | |||
<br> | |||
<br> | |||
<br> | |||
At first glance it may just look like a fairly clean variation of the default template, but it actually uses some very advanced features.<br> | |||
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.<br> | |||
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:<br> | |||
[[Image:072.png]] | |||
<br> | |||
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.<br> | |||
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 [http://www.rejetto.com/forum/index.php?action=dlattach;topic=4713.0;attach=1097 tray-icon utility by ledufe]. | |||
It only works if you have Microsoft's .NET Framework 2.0, freely available at [http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8edd-aab15c5e04f5&displaylang=en 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:<br> | |||
[[Image:087.png]]<br> | |||
You'll notice that two files are added to the folder, named ''HFS-Service.exe'' and ''HFS-Service.ini''.<br> | |||
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.<br> | |||
In Xp, you can confirm that itis working properly by checking "Services" under "Administrator Tools" in the Control Panel. | |||
[[Image:091.png]] | |||
=== | ===Upgrading=== | ||
----- | ----- | ||
New versions of HFS are released fairly frequently. Although you can always manually download the latest version from [http://www.rejetto.com/hfs/?f=dl Download], the easiest way is use:<br> | |||
"Check for news/updates".<br> | |||
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:<br> | |||
[[Image:082.png]].<br> | |||
Click "OK":<br> | |||
[[Image:083.png]].<br> | |||
Click "OK" to start the download and installation process. A "Dos box" like the following is displayed:<br> | |||
[[Image:079.png]]. | |||
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. | |||
Latest revision as of 02:01, 2 February 2010
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.
- 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.
- 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).
- Click "Import" and, if necessary, navigate to C:\HFS\Templates. Select "Beta Black Template v3.tpl" and click Ok.
- When the new template is loaded into the editor, click "Apply", and then "Ok" (to dismiss the editor).
- 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:
- 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).
- Navigate to the style section of the template, and find this line: "body, .row { color: #000000 }"
- 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". - Go back to the main HFS window, select root (/), right-click and then click "Browse it" to see the effect of your changes.
- 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.
- 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".
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".
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.
Upgrading
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.