How To Design Your Own ImageFolio Skins

Whether you are an HTML programmer, a graphic designer, or a wannabe, you can design your own ImageFolio skins. The only thing you really need to know about is color.

Designing your own ImageFolio skin is quite simple, just follow the steps below.

If you are an expert and you are already familiar with ImageFolio:

1. Download via FTP any existing skin directory from ImageFolio4_files/skins.
2. Change the name of the folder/directory you downloaded to your new skin name.
3. Open up and modify config_skin.pl using your text editor. Save and overwrite when done.
4. Open up and modify all the *.html files from the templates directory. Save and overwrite existing files.
5. Open up and modify all the *.png and/or *.gif images. You may make them any size you want and you may vary the sizes if you prefer. Save and overwrite existing files.
6. Upload your news skins folder via FTP to the skins directory on the server.
7. Log into the ImageFolio Administration Area and add the new skin via the Config Editor.
8. Log out of the ImageFolio Administration Area and browse as a guest, or log in as a general user to ImageFolio.
9. Switch to the new skin by selecting it from the Skin link on any gallery page.
10. Navigate through all the pages and make sure they look good. If they don’t, edit the files, then re-upload and replace existing files until you get the desired look and feel.
11. When satisied with your results, navigate to a nice category and take a screenshot of the page.
12. Open up the screenshot in Photoshop or another image editor and crop it, then size it down to 400 pixels wide, and save it (Save for Web) as screenshot_lg.jpg.
13. Size screenshot_lg.jpg down again to 200 pixels wide and save it (Save for Web) as screenshot.jpg.
14. FTP both screenshot.jpg and screenshot_lg.jpg to the images directory of the newly created skin.
15. You are done. If you choose to distribute or sell this skin, you may do so from within your ImageFolio Administration Area or go to skins.imagefolio.com
16. Repeat as desired.

If you are a current ImageFolio Pro Edition 4.x user:

Login to your website via FTP and download one of the existing skin directories. They are located in ImageFolio4_files/skins/. Each skin is housed in it’s own directory structure. The directory name is the same name as the skin itself.

Each skin directory contains 2 or more subdirectories. The default subdirectories inside of the main skin directory are images and templates. The directory should also contain two additional files called config_skin.pl and index.html.

So you have:

   skin_name
      images
      templates
      config_skin.pl
      index.html

…and possibly more directories or files depending on the author of the skin.

index.html
The least important file is index.html, which should not be modified. It is meant to serve as an index file in case someone tries to read the directory structure via a web browser. If they do, they are presented with the index.html file, which tells them that they are forbidden. Do not modify this file, but do retain it as part of your skin.

config_skin.pl click here for a sample
The most important file is the config_skin.pl, which is the global configuration file for the skin itself. It contains questions and answers. This is the file you will use to define the global look and feel of the skin you design. You will need to edit this file with a text editor, not a binary editor such as Microsoft Word. The two text editors we recommend are EditPlus (www.editplus.com) for Windows, and Text Wrangler (www.barebones.com) for Mac. Please dowload the appropriate text editor to your computer before modifying config_skin.pl.

Frequently Asked Questions

Do I have to do just GIF or just PNG images or can I do a mix and match of both?
You can mix both GIF and PNG images if you prefer. Just be sure to denote the filename from within your
config_skin.pl file (at the bottom).

Am I limited to the number of images I can use?
You can add as many images as you want. You are not limited to any certain number of images.

Can I use background images on the pages or within the tables?
You may use background images thoughout your skin.

Can I create a CSS file for my skin?
Yes, you may create a CSS file for your skin. You may use a global CSS file or embedded CSS tags, or a combination of both.

Can I edit the HTML templates using Dreamweaver or GoLive?
You may edit the templates via a WYSIWYG editor, such as Dreamweave or GoLive, but if you know HTML, use a text editor instead.

Can I move the search box to the bottom and navigation buttons to the top center?
You can move everything around, not just the search box or navigation buttons. Experiment a little and you’ll see what you can do.

In Photoshop I have options to Save As, Save, and Save for Web. Which one should I choose?
Always choose to Save for Web. The reason is, the normal Save or Save As functions will sometimes embed XML code into your images and make them bigger in file size. Larger file sizes load slower in a browser.

When I save the images as type GIF, I have a lot of options in Photoshop. Which ones are best?
It’s really up to you. We prefer to use type Adaptive with no Dither, 64 or 128 Colors, 0 Lossy, No Matte, O% Web Snap.