Skin

VidyaVitamin can change the appearance of a window with a skin. In order to change a skin, moves an vvskn or jpeg, or png graphics file to the "Skin" folder, and select those from a main menu, or drops a file to a window directly.

If a skin is a picture file, the background of a toolbar area is exchanged to the image. A image is arranged tile patterns from the middle right to the left.*1

In order to create an original skin, from "Skin" of a main menu, you choose "Create skin" and specify the folder where the files was stored. The created skin file is saved at "Skin" folder.

As images of a skin file, you prepare following Required image files and main image files. We are distributing supportive tools of a skin creation freely from here. So, please use these.

Require files(All PNG Format)

ToolButtonL.png
Arranges four 24x24-pixel images horizontally. It becomes an image of Normal, Focus, Press, and Disabled from the left.

ToolButtonM.png
The design of the tool button which exists in the center.

ToolButtonR.png
The design of the tool button in a right end.

ToolButtonI.png
The design of a independent tool button.

ToolButtonD.png
The tool button of a drops down type. Arranges four 32x24-pixel images horizontally.

ScrollButtonL.png
Left scroll button. Arranges three 8x24-pixel images horizontally. The image of Disabled is unnecessary.

ScrollButtonR.png
Right scroll button.

MainButton.png
The button used for a main menu. Arranges three images of arbitrary sizes horizontally.

MinButton.png
Minimize button. Arranges three images of arbitrary size horizontally.

MaxButton.png
Maximize button.

RestoreButton.png
Restore button. You must fit the same size to a maximize button.

CloseButton.png
Close button.

CMinButton.png
Child window minimize button. Arranges three 15x15-pixel images horizontally.

CMaxButton.png
Child window maximize button.

CRestoreButton.png
Child window restore button.

CVertButton.png
Arrange vertical button.

CHorzButton.png
Arrange horizontal button.

CCascadeButton.png
Cascade button

The png image which starts in "main_" is treated as an overall design of a window. The part of a full transparent is treated as a transparent region of a window.

The definition of arrangement of buttons and "main_" images are enabled by describing as utf-8 format to the text file of the name of "define.txt". A definition assigns per line, such as "Define:Value". All the lines in which ":" does not exist are ignored.

In "CloseButton" "MaxButton" "MinButton" "MainButton", assigns the position of each button and describes like "CloseButton:-49,1,-4,20". A value points the position of left, top, right, buttom respectively. And if a value is minus, it will become a relative position.

Like "Main_Back:4,0,-4,200,100", the definition which starts with "Main_" is the combination of an area and a priority which draws an image. When the size of an image is smaller than an area, the image is drawn as a tile.

There are the following definitions in addition to a button and an image.

margin : Sets up the margin around a window.
caption : This area becomes the same treatment as a title bar.
gadget : A browser display area. The contents of the browser can be changed by inputting URL*2 or preparing an HTML file(gadget.htm) after a value. In addition, a scroll bar is not displayed.

Moreover, if "Part of skin" is chosen from a menu, the contents of the current skin can be outputted. Please use reference of original skin creation.

If you contribute the created original skin, we will exhibit at the server of TNK Software. Contribution is here.

*1 Since this is the same specification as Personas of Firefox, it can use the image of Firefox.
*2 ex) gadget:115,1,-100,32,http://www.sample.com/