Creating your own skins

Avant Browser Help - Creating your own skins Part 3

The meat and potatoes of any skin are the icons that are used. I have already gone into the tools that can be used. Now, some more information on the icons themselves.

Icons need a background/transparent color of fuchsia (RGB: 255,0,255). This color will be replaced with what is behind it.

System Icons

These are the icons that are normally in the upper right. There are 11 different system icons with 4 different states each. Meaning you need to make 44 different images.

These icons are 21x21 (pixels) in size. That is the TOTAL CANVAS size, the actual image can be smaller.

The states of the icon button are:

Normal: the image will be displayed when the button is enabled and mouse is not hovered on.
Hot: the image will be displayed when the button is enabled and mouse is hovered on.
Down: the image will be displayed when the button is pressed down.
Disable: the image will be displayed when the button is disabled.

Open the Skin Factory to see what these states look like in default mode.

Toolbar Icons

These icons are the images that are normally right below the text menu options.

These image have a MAX CANVAS size of 24x24 (pixels) for the large icons and 16x16 (pixels) for the small set of these icons, like the System Icons the actual image can be smaller.

You can make the large and small icons different if you wish, but it is best to make them the same design.

Unlike the system icons, you only need to create one large and one small toolbar icon.

Tab bar Icons

These are the images that are shown on each tab on the windows tab bar within Avant. They get displayed sequentially as each webpage loads creating an animation like effect.

These images have a max canvas size of 18x18 (pixels) and there are 10 total. The first 9 create the page load animation and the last image is what's displayed when the page is completely loaded & no favicon is present.

Other Icons

There are also 59 other images that can be changed. These icons show mostly on the Avant Browser Options dialog page as well as in the side panel, on the status bar, and on some menus.

The total canvas size for these are 16x16 (pixels)

Next: Creating your own skins - Part 4

See Also:

Creating your own skins - Part 1
Creating your own skins - Part 2
Creating your own skins - Part 4
Creating your own skins - Part 5