Who is it for?

This topic discusses how to edit the HTML code of the Website skin. If you have created your website navigation using Favorez you may want to further customize the resulting pages. First you should check the Website Properties dialog box to see if you can make the necessary adjustments there. For instance selecting a different background color requires no HTML coding, this can be done in the Design tab of the Website Properties dialog box. If you are still not satisfied with the results after that then continue to read the rest of this topic.

Can I do this?

Adjusting the Website skin is harder than just clicking away in a dialog box. However, if you regularly edit HTML code by hand you will be on track in no time. You can edit HTML code using Windows Notepad or an HTML editor like HomeSite or HotDog.

Required reading

Please read the topics about folders and files and website navigation first.

Tip

Before you start off adapting the Website skin it may be a good idea to copy the skin and work on that copy.

Favorez tags

When you study the input files of the Website skin you will stumble upon some special tags now and then. These special tags look like this "{COLOR_BG}", they are used by Favorez only. You do not need to know much about this unless you are a skin developer. When you edit any of the Website files you need to stay clear of the Favorez tags. To do so only edit the HTML code outside of the tags.

In the input folder of the Website skin there are three files of particular interest. Each of these files is discussed below.

index.html

This file defines the frames for the Website skin. Edit this file if you need a different organization of frames on your website.

Note

Unregistered users need to have a frame named "banner" in the index.html file, they will get an error message otherwise.

banner.html

The banner file is loaded into the frame at the top. If you have not yet registered, Favorez will insert a banner ad into this file.

contents.tpl

This is the file with your website navigation links. Most of the properties of this file can be set via the Design tab of the Website Properties dialog box. Actually there is not that much HTML code in this file, all HTML code is located at the bottom of the file.

Tip

While you make your adjustments make sure you test your adapted skin regularly. This way if you make a mistake you will know that the error is located somewhere near your last changes.

Tip

Read more about customizing the default icon for links and folders in Skin Resource Files.