Opera Browser Wiki : Opera7Skinning

---

How to Skin Opera 7

---

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):

standard.zip

• 2nice [stores the big icons on the main bar, other skins may use mainbar]
• caption [the MDI minimise,restore and close buttons]
• checkbox [checkbox selected/unselected]
• dialog* [controls the program dialogs]
• drop_insert [the little widget you see when dragging something in the UI]
• edit [the edit box, also used for the address entry box etc.]
• header
• header_button
• icons
• mail_headers
• skin.ini [THE control file]

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.

Skin.ini Revealed

---

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:

The BoxTile

---

Most Opera 7 skinning uses the BoxTile to determine the appearance of objects. Imagine taking a box, and cutting it up:

That is the basis of the boxtile. The left/right/top/bottom & center parts tile automatically to the size of the element.

The Different Sections

---

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:

• [Options] #General skin options
• [Status Skin] #The status bar
• [Progress Empty Skin] # The progress bar before any info has come in
• [Progress Full Skin] # The progress bar full
• [Vertical Drop Insert] # The insert when you drag'n'drop something
• [Horizontal Drop Insert] # The insert when you drag'n'drop something
• [Pagebar Button Skin] #The page bar tabs
• [Pagebar Button Skin.bottom] #Page bar if placed at the bottom
• [Hotlist Selector Skin] #The background for the hotlist panel selector buttons
• [Hotlist Panel Skin] #The hotlist main panel
• [Hotlist Splitter Skin] #The little bar between the hotlist and the browser window
• [Window Skin] #The transfer window and the background of the progress bar
• [Browser Window Skin] #main browser background
• [Dialog Skin] #the dialog background
• [Dialog Page Skin] #The 'panel' surround of the dialog page overlaying the background
• [Dialog Button Border Skin] #dialog buttons surrounds - the shadows in the default skin
• [Browser Skin] #the border around the actual browser page
• [Edit Skin] #the edit box, e.g: the searches in the default personal bar.
• [Dropdown Button Skin] #e.g. the button to dropdown a menu on the URL entry field
• [Dropdown Skin] #e.g. the URL entry field, the quick searches in the panels.
• [Caption Button Skin] #The minimise restore close buttons in MDI mode
• [Menu Button Skin] #The main menu entries
• [Toolbar Skin] #The actual toolbars. Only padding and images can be used in this section. If you want specific settings for each bar, use these:

[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]

• [Toolbar Button Skin] #Buttons on toolbars when not 'large' e.g. security button on address bar
• [Selector Button Skin] #The Hotlist panel selectors, e.g. Info, Notes etc.
• [Tab Button Skin] #Tab buttons in dialogs e.g. 'customize toolbars' and often also the page bar tabs
• [Tabs Skin] #The area surrounding the tabs.
• [Start Skin] #Unknown. Probably a legacy section from the 7.5Betas without any effect.

---

Categories:

CategoryOpera
CategoryTutorial

Back Links:

1. Opera
2. Opera7
3. OperaJA

Comments [Hide comments/form]

Add a comment to this page (use wiki formatting if needed, no HTML/BBCode please). Only registered users can submit links, your comment will be deleted otherwise: