Let's get started

Start off by copying Opera's default skin. (It's recommended to upgrade to the newest version of Opera before copying the skin, to make sure you use the newest skin version.) Open the skin directory in the Opera program folder, typically:
c:\Program Files\Opera75\skin\
For Opera for MacOS X, the skin is saved within the package (Ctrl-click the Opera package, select "Show package contents", then go to Contents > Resources > Skin)

Open the file "standard_skin.zip" using an archive tool, and extract all the files to a new folder, say "My skin". The subfolders does contain images for the skin, while "skin.ini" contains settings and links to the images.

Editing the skin

Open the file "skin.ini" in a text-editor, for example Notepad (Windows), Kate (Linux) or TextEdit (Mac). The file is formatted like this:

[Section]
Setting = Setting Value

; A commented line

Basic settings in "skin.ini"

The [Info] section is normally placed first and should contain the following:

Name=name of skin
Author=name of author
Version=2

Version should be 2, otherwise Opera 7 will reject the skin.

The [Options] section can contain the following:

Native Skin = 0 or 1

Only set this to 1 if you want Opera to draw controls to look nativly (to the system). Default is 0, so you would normally leave this option out. To be more specific, if you set this to 1, like the "native" skin included with Opera does, certain skin elements will be drawn by code that is built into Opera. This code uses the system's own functions for drawing controls and borders.

Pagebar max button width =
Pagebar min button width =

Use these to specify in pixels the min and max width of pagebar buttons. Normally, you would not specify this, so leave them out.

Fallback foreground = 0 or 1
Fallback background = 0 or 1

These options specify if Opera should fall back to the standard skin if a skin element of either foreground or background type was not found.

Typically Fallback foreground should be 1 and Fallback background should be 0. In other words that foreground elements like button images that the new skin does not have are fetched from standard, but that background images are not fetched (the look of the windows etc).

This is based on the assumption that most skins will not bother to replace all foreground images of a full skin, but will at least change all of the background.

Large Images = 0 or 1

Used to define whether large images are present in the skin or not. If set to 1, a checkbox "Large images" will appear in the Customize toolbars dialog.

Image/element settings in "skin.ini"

Let's start off with an example:

[Menu Button Skin]
Padding Left = 5
Padding Right = 5

[Menu Button Skin.hover]
Text Color = #ffffff
Color = #6B82A4

[Menu Button Skin.selected]
Clone = Menu Button Skin.hover

The Padding settings sets the padding length in pixels. Menu Button Skin.hover inherits settings from Menu Button Skin, but changes the buttons text-color and background-color when the skin element is hovered. Colors can be written in RGB colors (for example "#RRGGBB") or using the colors set by the user (for example "Window Disabled").

Padding can also be defined for each single button/element, instead of defining it for all the elements within a section:

Sort descending = icons/dropdown.png, 0, 2, 0, 2, 0

The formatting is like this:
Name of element = filename, colorize the element (yes=1, no=0), margin left, margin top, margin right, margin bottom

Example 2

[Edit Skin]
Type = BoxTile
Margin Left = 3
Margin Top = 3
Margin Bottom = 1
Margin Right = 3
Color = Window
Tile Left = edit/left.png
Tile Top = edit/top.png
Tile Right = edit/right.png
Tile Bottom = edit/bottom.png
Corner Topleft = edit/topleft.png
Corner Topright = edit/topright.png
Corner Bottomright = edit/bottomright.png
Corner Bottomleft = edit/bottomleft.png

[Edit Skin.disabled]
Clone = Edit Skin
Color = Window Disabled

The Type setting defines what type of element this is. Here, we are displaying a tile image for a box/square. Clone makes Edit Skin.disabled inherit the settings and images, but changes the Color.

Type = Image | Box | BoxTile (Default is Image)
Margin * = Pixels (number)
Height = Pixels (number)
Width = Pixels (number)
Color = #RRGGBB | Window | Window Disabled
Text Color = #RRGGBB | Window | Window Disabled
Tile * = Path to image
Corner * = Path to image
Name of element = Path to image
Name of element = Path to image, 1 | 0 (colorize : yes/no), Pixels (number),
Pixels (number), Pixels (number), Pixels (number)
Blend = Percent (number 0-100)
Clone = Link to element
Child* = Link to element
Actions = .hover | .pressed | .selected | .attention | .disabled | .bottom | .open
Positions = .top | .bottom | .left | .right

For detailed descriptions, see the Skin specifications

For further examples, take a look in "skin.ini".

Getting started drawing images

We are using the free image editor "The Gimp" in this example.

The easiest image to draw, is probably the background image. In the standard skin, it's saved as "/window/background.jpeg" inside the skin. What we are doing, is simply to replace this image.

Create a new image, apply a pattern or draw a background, and save over the old "background.jpeg" image. The image can also use another image format, such as GIF or PNG - but you will have to change the path to it in "skin.ini".

Next, let's start drawing the most common buttons. In the standard skin, these are saved in the "buttons" folder. Start with "back.png". Create a new image (if you are using the same "skin.ini", you should probably get the dimentions of the old "back.png" image first), preferably with a transparent background.

When working with this very small image, you will sometimes have to draw the image pixel for pixel. It's recommended to zoom the image to 1000-1600%.

Now, go through all the images in the folders and replace them. If you find images that you don't know what is used for, just leave them as they are.

Tip: What format? While GIF-images has only one transparent color, PNG-images can have several grades of transparacy. This means that when using PNG, you can for example create "smooth shadows".

Making the skin ready for Opera

When the skin is ready for use, you need to create a zip archive containing all skin data. The "skin.ini" file needs to be in "top level" of the skin (path should be blank or "/"). Make sure to save the file paths for all files.

The skin can be published at
My Opera Community (requires login)
deviantART

Tip for Web developers! If you want to add the skin to your own homepage/Web server, and you want Opera to automatically install the skin - you can define zip-files in a catalog to have the mime-type application/x-opera-configuration-skin. If you are using an Apache Webserver, which is one of the worlds most common, you can simply add a file ".htaccess" in the directory where you put the skins, with the following line:

AddType application/x-opera-configuration-skin zip