Designing a theme

In order to ease the personalization of galleries’ appearance, EZWebGallery let you design your own skins. They are saved in .skin file format which you can open latter to apply them to other galleries. Skins don’t change the behavior of a gallery: only its appearance.

Important information:

1. Regenerating a gallery with a new skin or after a skin modification is blazing fast. Don’t hesitate to often click on the Generate button in order to evaluate the result.
2. The skin Exemple_Highlight.skin was crafted to help understanding the meaning of the various parameters. Using flashy colors, you can easily visualize their influence.

Just as the gallery is composed of the two Navigation and Photo screens, the Skin Designer windows is composed of tabs:

• Browsing thumbnails, to set the parameters concerning the Navigation screen and its thumbnails table,
• Photo, is about the Photo screen,
• Misc, hosts the parameters concerning the optional (which can be hidden) elements and the initial loading box.

Skin name: the field set the name of the currently opened skin. It will appear in the Appearance tab.

Browsing Thumbails

• Background: Can be a wallpaper image or a color.
• Browsing tabs: All the parameters concerning the tabs bar located on the upper-left of the thumbnails table. These tabs allow to navigate if there are too much thumbnails to fit in the table.
• Thumbnails Mosaic: To configure the appearance of the thumbnails table. Man can set a background (image or fill color). Border (Width and color) is about the border framing the whole table. Spacing (Width and Color) is about the space between the thumbnails inside the table.
• Thumbnails: Settings to configure the aesthetics of the thumbnails themselves. The border framing the thumbnails can have a different color when hovering the mouse. Note that the size of the thumbnail is not part of a skin. It is set in the Appearance tab of the main window.

Photo

• Photo Page Background: Can be an image (texture) or a plain color.

The following properties are separated into two tabs : Framing and Text and Navigation.

• Framing: Concerns the frame around the photo : width, color (a plain color or a texture), and its “internal margin” which is the space between the photo and the frame.
• Texts: Set up the texts composing the gallery’s title, displayed in the frame, above the picture, and the photo’s caption, displayed in the frame beneath the photo.
• Previous/Next block Appearance: The “previous” and “next” arrows are located in so-called Blocks located on the two sides of the Photo Screen and which can be transparent or have their own background (color or image) and borders.
• Buttons Icons: Images uses for the three buttons of the Photo Screens.
  • Previous: asks for the previous photo
  • Next: asks for the next photo
• Buttons Behaviour: Those three buttons can have a different appearance, being activated (man can click them), deactivated (man cannot click them) or hovered.

Misc

This tabs hosts the parameters concerning the loading screen, which is briefly displayed during the initial loading of the gallery, and the optional vertical title, a zone of the Navigation Screen hosting the title of the gallery.

Loading screen

• Loading box: A framed box containing the progress bar.
• Progress bar: indicates the progress of the initial loading phase of the gallery. The progress bar is located inside a frame, which border-size and color can be configured. There are two states: “loaded” an “not yet loaded” in which the colors and the text, used to display the loading progress numerically, appearance can be modified.

Vertical title

Optionally displayed.

• Block Appearance: The title is hosted in his own block, to separating it from the thumbnails table. Its width, border (size and color) and background (image or color) can be set up here.
• Text Appearance: parameters of the text composing the title itself. Font, Size, Color and so on. As the title is vertically laid-out, the “Line Height” configure the spacing between letters.