Every 'visual' aspect of the user interface (UI) in Opera7 can be customised. This is known as 'skinning'. To skin Opera 7, you design a series of graphics for the various parts of the UI, and then tell Opera how to use them. Skins are stored in ZIP files (where lots of different files can be stored in a compressed 'holder' file).
We will deal here with describing the standard Opera 7 skin (standard.zip), which is stored in the Opera 7 program directory in the /skin sub folder (e.g. c:\program files\opera7\skin\standard.zip). For any other skin, just substitute the name of your skin in the following discussion. If you automatically download a skin and have a multi-user setup, your skin may be stored in your user directory.
Skins can use a variety of graphics formats. However, the most flexible (and the default) is the PNG format. PNG format files are usually smaller than GIF images, and can use two types of transparency, a binary transparency like GIF files (used when the PNG is 8-bit), and a full alpha-transparency (when PNG images are 24-bit). Full alpha transparency gives great control over how to combine the visual elements of a skin. You will need to use an image editing software that has full support for alpha-transparency (e.g. Photoshop).
Useful Tip: You normally need to unzip the ZIP file, then modify specific files, then re-zip it. This is quite tedious, therefore a much better solution is to use a file manager that has native support for ZIP files (much better than using Explorer anyway, irrespective of the zipping advantage). An example is Servant Salamander, which treats a ZIP file like it's a normal folder, you can edit files, copy and move them without having to worry about 'zipping' at all. It makes modifying skin files much quicker. Remember: You cannot make changes to a ZIP file while Opera is using it; simply select another skin, make the changes you want to your skin, then reselect it to see your changes.
The skin ZIP file has the following rough format (see skin.ini below for more detailed info on what bits affect which parts of the UI):
The skin.ini file contains the description of how Opera applies the contents of the folders to construct the UI. The folder names are all user-selectable, and some current skins (like breeze) will have different names, all that is required is that the names agree with what appears in skin.ini. But if you want to keep things simple, just use the standard names.
The skin.ini file contains sections that describe particular UI elements. For example, the section that controls the 'tabs' in the page bar is prefixed with [Pagebar Button Skin]. Following the heading are a series of declarations that specify an element. Lets have a look at one (line numbers have been added purely for description):
1) [Tab Button Skin] 2) Type = BoxTile 3) Tile Center = tab_button/center.png 4) Tile Left = tab_button/left.png 5) Tile Top = tab_button/top.png 6) Tile Right = tab_button/right.png 7) Corner Topleft = tab_button/topleft.png 8) Corner Topright = tab_button/topright.png 9) Margin Top = 2 10) Margin Right = -10 11) Padding Left = 5 12) Padding Top = 5 13) Padding Right = 15 14) Padding Bottom = 2
The first line tells Opera that this section controls the look of the UI tabs (usually seen in dialogs). This declaration is also usually used as the tabs in the page bar because its declaration:
[Pagebar Button Skin]
Clone = Tab Button Skin
simply copies the Tab Buttons. OK line 2 of the [Tab Button Skin] section determines the type of skinned element, and can be either Boxtile (see below) or Box. Boxtiles have fixed corner images (lines 7 & 8), and the rest are tiled (lines 3-6). The position descriptions in the Boxtile are given by their locations (see the boxtile image below). In this case, because we never see the bottom of Tab Button, these parts are not specified. Finally, the Padding and Margins are specified for the element. The margin and padding relate to the object in the following manner:
Most Opera 7 skinning uses the BoxTile to determine the appearance of objects. Imagine taking a box, and cutting it up:
As highlighted above, the skin.ini file is composed of different sections that control the various aspects of the skin applied to the program, but it is confusing to know which section is affecting what part of the UI. Here is a (incomplete) list:
[Mainbar Skin] [Personalbar Skin] [Navigationbar Skin] [Pagebar Skin] [Addressbar Skin] [Statusbar Skin]
You can also add these to specify settings for certain toolbar positions: .left, .right, .top, .bottom. e.g:
[Personalbar Skin.bottom] [Personalbar Skin.right]