How to edit HTML Facebook templates

The following tutorial will show you how to edit HTML based Facebook templates. You’ll see the step-by-step instructions on editing of general aspects of the template.

1. Before you start customizing the template, you may preview the original template.  To preview the template, simply open the Index.html file in the browser.
2. In order to modify the pages content, open each ‘html‘ file in Dreamweaver.
3. You can use the "Split" option to see the design and the code. to save the file, press CTRL+S key or go to File -> Save
4. To add more pages, simply duplicate the original one. Rename it and open in Dreamweaver to modify the content of it.
5. In order to edit images, or videos, locate the folder, where the files are and simply change them.
6. In order to edit the text color, we should modify the .CSS file.
7. In order to edit the Logo, or the company name text, we should modify the ‘psd’ file, using Adobe Photoshop option Save For Web.

   NOTE: if you want to use the same fonts, please install all the fonts to your computer, prior to open the ‘psd’ file and the Photoshop program itself. Simply copy all the fonts from ‘sources/fonts’ folder to your ‘control panel/fonts‘ folder on your computer.

8. Open the ‘psd’ file in Photoshop and enable the slices: View->Show->Show Slices.
9. Select the “text tool” from the tools panel, click on the logo text and change it to fit your needs.
10. After you are done editing the logo, navigate to the library and hide all the layers, except for the logo itself.
11. Then go to File->Save For Web. Select the slice which you have edited and click Save Button.
12. Make sure to save it in the ‘site’ folder. If you have done everything correctly, you will be prompted to replace the file.
13. Hit ‘Replace’.
14. You may now open the Index.html file to see the preview.
15. After you have modified the files, upload the content of /site folder to the server, keep the file structure as is. After that is done, reload your APP page on Facebook to see the changes.

Feel free to check the detailed video tutorial below: