ttt-skin guide

Section entries

All sections - alphabetical | grouped | visual

Image types, tiles and corners: Type = Box / Boxtile / Boxtilehorizontal / Boxtilevertical / Image / Boxstretch/Stretchborder

Other entries: Fallback version, Native, Clearbackground, Padding, Margin, Spacing, Color, Colorize, Border/Border color, Text color, Text bold, Text underline, Text shadow/Text shadow color, Text zoom, Blend, Child, Clone, Width/Height, Scalable, Comments

Please note the new/changed entries marked with `Valid since 10.5`

Image types, tiles and corners:

Image calls works as follows: the type-entry defines the desired image type and the tile-entries defines the paths to the images inside the skin.zip. The types Box, Boxtile, Boxtilehorizontal and Boxtilevertical bases on 9 tiles, the types Image and Boxstretch on the center tile only (default if no type entry is `Type = Image`).

Normally you should work with .PNG files, but also .JPG and .BMP are possible. For animations you can use animated `GIF` and `APNG` files.

If you define images by type, you see these images on top of an eventually in the same section defined color (see Color); you see then the color only instead of lacking tiles or behind transparent image parts.

If you use an image-file in two or more sections, then you cannot be sure that `Colorize = 0` works as expected (default if no entry in normal sections is 1, see Colorize); you see always the colorize state the image had if loaded the first time (and you cannot be sure which section is loaded first). So, if you plan to use `Colorize = 0` you should use an image-file only in one section!

Type: Box

Type = Box
Default if no entry is Type = Image
Given size/given places, all tiles untouched (normally in use with Tile center only):
```
[Test section]
Type = Box
Tile center = buttons/centertile.png
```

Type: Boxtile

Type = Boxtile
Default if no entry is Type = Image
Repeated if necessary, Tile center repeated horizontally and vertically, Tile top/bottom repeated horizontally, Tile left/right repeated vertically, Corners untouched (in some cases it can be useful to define only the desired tiles):
```
[Test section]
Type = Boxtile
Tile top = tabs/toptile.png
Tile bottom = tabs/bottomtile.png
Tile left = tabs/lefttile.png
Tile right = tabs/righttile.png
Corner topleft = tabs/toplefttile.png
Corner bottomleft = tabs/bottomlefttile.png
Corner topright = tabs/toprighttile.png
Corner bottomright = tabs/bottomrighttile.png
Tile center = tabs/centertile.png
```
If the target is smaller than the boxtile source, the tiles are cropped then as follows:

Type: Boxtilehorizontal

Type = Boxtilehorizontal
Default if no entry is Type = Image
Horizontally repeated if necessary, Tile top/center/bottom repeated, Tile left/right and Corners untouched (normally in use with Tile left/center/right only):
```
[Test section]
Type = Boxtilehorizontal
Tile left = border/left.png
Tile right = border/right.png
Tile center = border/center.png
```

Type: Boxtilevertical

Type = Boxtilevertical
Default if no entry is Type = Image
Vertically repeated if necessary, Tile left/center/right repeated, Tile top/bottom and Corners untouched (normally in use with Tile top/center/bottom only):
```
[Test section]
Type = Boxtilevertical
Tile top = top.png
Tile bottom = bottom.png
Tile center = center.png
```

Type: Image

Type = Image
Default if no entry is Type = Image (this type here)
Stretched/shrunken if necessary, Tile center only - stretched/shrunken horizontally and vertically:
```
[Test section]
Type = Image
Tile center = images/test/center.png
```
The type Image have about the same effect as the type Boxstretch with `Stretchborder = 0`, see below

Type: Boxstretch / Stretchborder

Type = Boxstretch
Default if no entry is Type = Image
Stretchborder = xa xb xc xd
Values in px, default if no entry is 2 2 2 2

xa specifies the top border
xb specifies the right border
xc specifies the bottom border
xd specifies the left border

Stretched/shrunken if necessary, Tile center only, additional stretchborder-entry in order to exclude the corners/borders from stretching.

The center part is stretched/shrunken horizontally and vertically, the excluded top/bottom parts only horizontally and the excluded left/right parts only vertically, the excluded corner parts are completely untouched.

New behaviour, Valid since 10.5. This example exludes 10px at the top, 8px at the right, 0px at the bottom and 6px at the left from stretching:
```
[Test section]
Type = Boxstretch
Stretchborder = 10 8 0 6
Tile center = images/test/center.png
```
Old behaviour, for Opera before 10.5 (but valid in 10.5 too). This example exludes 16px at the top/right/bottom/left from stretching:
```
[Test section]
Type = Boxstretch
Stretchborder = 16
Tile center = images/test/center.png
```
The type Boxstretch is the easiest way in order to have images with rounded corners, eg around buttons. Bear in mind: the quality is better if the source image is larger than the target.

With stretchborder set to 0 the type Boxstretch have about the same effect as the type Image, but there is a difference how the tile is enlarged. The examples below are enlarged by Opera from a very small source:

But there is no significant difference if the tile is reduced by Opera from a very large source:

Other entries:

All the following settings/entries are possible in normal sections, however they are not useful in every case or every combination. Note also that the standard-skin sometimes contains entries which have no effect in the specific cases.

Fallback version

Fallback version = 3
No effect in a custom skin - only necessary inside the standard-skin, see Fallback

Native

Native = x
Value 1 is enabled, 0 is disabled, default if no entry is 0
Valid since 10.5
Specifies if the section should be painted by the OS (1) or not (0).
If enabled; Images or a color defined inside the same section or called via clone/child are then no longer valid (defined now by the OS), also Colorize have no effect, but other entries have the expected effects.
Do not mistake this new section entry with the Native skin entry in [Options].

Clearbackground

Clearbackground = x
Value 1 is enabled, 0 is disabled, default if no entry is 0
Valid since 10.5
Specifies if a toolbar-section should be completely transparent (1) or not (0) - transparent to the OS/other programs.
If enabled and no color or no image is defined in the section you see the full transparency, but you can achieve nice effects if you define a semi-transparent image.
Note that Clearbackground works only with Windows Vista/7 and it`s aero-designs, but can have unexpected effects with an non-glassy/intransparent design or with another OS; therefore we have now some toolbar skins twice, eg [Addressbar Skin] for common purposes, but the alternative [Addressbar Transparent Skin] for glass-designs only. Note also the related entries in [Options]: Full transparency and Transparency

Padding

Padding top = x
Padding bottom = x
Padding left = x
Padding right = x
Values in px, also negative values possible (eg -20), default if no entry is 2 in normal sections, but 0 in [Boxes] and [Images]!

It is not always necessary to define padding for all directions, but bear in mind: default if no entry is 2px!

In toolbar sections padding defines the space between the toolbar border and the elements you see on the toolbar:

In button sections padding defines the space between icon/text and button border:

Margin

Margin top = x
Margin bottom = x
Margin left = x
Margin right = x
Values in px, also negative values possible (eg -20), default if no entry is 0

It is not always necessary to define margin for all directions (default if no entry is 0px)

In toolbar sections margin have no effect normally. In button sections margin defines the space around the button/text:

Spacing

Spacing = x
Value in px, also negative value possible (eg -20), default if no entry is 0

In toolbar sections spacing defines the space between the buttons (text included). In some cases it can be useful and space-saving to define negative values for toolbars at the vertical .left/.right positions (eg Personalbar skin or Pagebar skin):

In button sections spacing defines the space between icon and text:

Note also the entry `Button Text Padding=` in [Options] (in general for all buttons!):

Color

Color = #xxxxxx
Value in HEX, default if no entry is `No color`
As value you can use also Window or Window disabled, then the color for Window/Window disabled from the OS is valid directly

If you define images by type, you see these images on top of an eventually in the same section defined color; you see then the color only instead of lacking tiles or behind transparent image parts

On colors the entry `Colorize = 0` have no effect, see Colorize. In .hover subsections Blend have no effect on colors

Below you see a color defined in a toolbar section and in a button section:

In order to find the desired HEX color-code you can use an Opera widget: Color picker. Here some examples for the notation in HEX:
```
[Test section]
Color = #000000
;(black)

[Test section]
Color = #FFFFFF
;(white)

[Test section]
Color = #FF0000
;(red)
```

Colorize

Colorize = x
Values: 1 is enabled, 0 is disabled, default if no entry in normal sections is 1, but 0 in [Boxes] and [Images]!

This entry causes if the images defined in this section should be affected by color schemes or not (Tools→ Appearance→ Skin→ Color scheme)

If you use an image-file in two or more sections, then you cannot be sure that `Colorize = 0` works as expected; you see always the colorize state the image had if loaded the first time (and you cannot be sure which section is loaded first). So, if you plan to use `Colorize = 0` you should use an image-file only in one section!

`Colorize = 0` have effect on images only, but no effect for Color, Border color, Text color, Text shadow color and Child (but definable for the child itselfs)

Opera`s standard color schemes:

Border / Border color

Border = x
Value in px, default if no entry is `No border`
Border color = #xxxxxx
Value in HEX, default if no entry is `Black`

Draws a border in the desired thickness and color - the space therefore is taken from inside the area!

On border colors the entry `Colorize = 0` have no effect, see Colorize. In .hover subsections Blend have no effect on border colors

Border with 1, 5, 11px and red border color in a toolbar section:

Border with 1, 4, 8px and red border color in a button section:

In order to find the desired HEX color-code you can use an Opera widget: Color picker. Here some examples for the notation in HEX:
```
[Test section]
Border = 1
Border color = #0000FF
;(1px, blue)

[Test section]
Border = 3
Border color = #FFA201
;(3px, orange)

[Test section]
Border = 5
Border color = #09B309
;(5px, green)
```

Text color

Text color = #xxxxxx
Value in HEX, default if no entry is normally the text color from the skin part behind the current element - and so on - at the end of the order you see a text color from the OS (see `Text color priority` in the detailed info parts for every section in this guide)
As value you can use theoretically also Window or Window disabled, then the color for Window/Window disabled from the OS is valid directly

Normally the priority is Button-skin - Toolbar-skin - Base-skin - Text color from the OS, but there are occasionally some variances, see also related entries in Generic

On text colors the entry `Colorize = 0` have no effect, see Colorize. In .hover subsections Blend have no effect on text colors

Please note that you see also the text colors from the state-subsections .hover, .pressed, .selected, .attention, .disabled of a toolbar section if the text color is not already defined in the corresponding button section. Note also that checkboxes and radiobuttons have another text color priority/order than all the other buttons.

And: you cannot change the grey color of the numbers in speeddial; no way!

I strongly recommend that you always define also separate distinctive text colors for .selected and .attention for every button section! If a user prefers to work with `Text only`, the text color is then a important indicator for the states (together with a distinctive button area for the same states).

Here an example for red text color in a toolbar section - no text color in the corresponding button section:

And here the same example - but blue text color defined in the corresponding button section:

And again the same example - but in addition pink text color defined for the .selected toolbar skin:

In order to find the desired HEX color-code you can use an Opera widget: Color picker. Here some examples for the notation in HEX:
```
[Test section]
Text color = #FFFF00
;(yellow)

[Test section]
Text color = #800080
;(violet)

[Test section]
Text color = #683E24
;(brown)
```

Text bold

Text bold = x
Values: 1 is enabled, 0 is disabled, default if no entry is 0

Draws the text bold.

In toolbar sections bold text have normally no effect, but in button sections it works (partly); unfortunately the bold text appears in most cases not before a button is hovered. So `Text bold` you can use in state subsections only - as a rule (.hover, .pressed, .selected, .attention, .disabled).

Here an example for bold text in a .hover subsection for buttons:

Text underline

Text underline = x
Values: 1 is enabled, 0 is disabled, default if no entry is 0

Draws the text underlined.

In toolbar sections bold text have normally no effect, but in button sections it works as expected.

Here an example for underlined text in a button section:

Text shadow / Text shadow color

Text shadow = x y
Values in px, also negative values allowed (eg -2), default if no entry is `No text shadow`
Text shadow color = #xxxxxx
Value in HEX, default if no entry is `Black`

Draws a 1px shadow with the desired horizontal/vertical space and color to the text

x is the horizontal space in px - right direction; negative values for left direction
y is the vertical space in px - bottom direction; negative values for top direction

Works also with Text bold; the shadow is then bold too. But have no effect on the line if Text underline is in use.

On text shadow colors the entry `Colorize = 0` have no effect, see Colorize. In .hover subsections Blend have no effect on text shadow colors

Here some examples for text shadow in a button section, (Text shadow = 1 1 / 2 2 / -1 -1 / -4 2):

In order to find the desired HEX color-code you can use an Opera widget: Color picker. Here some examples for the notation in HEX:
```
[Test section]
Text color = #F70FFF
;(pink)

[Test section]
Text color = #808080
;(grey)

[Test section]
Text color = #808000
;(olive)
```

Text zoom

Text zoom = x
Values: 1 is enabled, 0 is disabled, default if no entry is 0

Displays buttons without text, but the text appears if hovered (per toolbar, only with `Images and text below`)

In toolbar sections text zoom have no effect, but in button sections it works under the following conditions:
- Windows XP/2000/Vista/7
- If Tools→ Appearance→ Toolbars→ Style→ `Images and text below` chosen
- If Tools→ Appearance→ Skin→ `Special effects` enabled
- Text zoom = 1 entry in the main button section, eg Toolbar button skin or Mainbar button skin

Text zoom defined in the main section of the Mainbar button skin; unhovered and hovered:

Blend

Blend = x
Value: from 0 to 100, default if no entry is 100 (0 is maximum transparency, 100 is minimum/no transparency, only for .hover subsections)

Defines how transparent the hover-images should appear on top of the unhovered images

In toolbar sections blend have normally no effect, but in button sections it works as expected.

Not affected are Color, Border color, Text color and Text shadow color

Below the blend effect in a .hover section for buttons (Blend = 15 / 30 / 50 / 70 / 100):

Child

Child0 = call to the desired section or entry
Value: another section or an entry from [Boxes] or [Images], default if no entry is `No child`

Draws the called additional image on top (multiple mentions possible with Child0 = ... / Child1 = ... / Child2 = ... and so on)

You can take the scrollbars from the standard-skin as a first example: there the `Scrollbar Grip Horizontal` and `Scrollbar Grip Vertical` from [Boxes] are defined as Child0 on top of the knobs, also the arrows on the scrollbar buttons are defined as child:

Some image-types are not that useful as child in every case, eg an icon from [Images] appears on the scrollbar stretched, but the same icon defined in [Boxes] appears correct (see also Image types at the top of this page):

Normally a child appears centered - but the margin settings from the child are respected; below two examples with 50px left margin (about the margin notation for the second example see also Notation in Boxes and Images):
```
[Scrollbar Horizontal Knob Skin]
Type = BoxStretch
StretchBorder = 2
Tile Center = scrollbar_knob/scrollbar_knob_horiz.png
Child0 = Pagebar button skin.hover

[Pagebar Button Skin.hover]
Type = BoxStretch
StretchBorder = 12
Tile Center = pagebar/top/pagebar_button_hover.png
Text Color = #ffffff
Margin left = 50
```
or
```
[Scrollbar Horizontal Knob Skin]
Type = BoxStretch
StretchBorder = 2
Tile Center = scrollbar_knob/scrollbar_knob_horiz.png
Child0 = Info panel

[Boxes]
Info panel = buttons/properties.png,,50
```
Below an example with two child-entries; the horizontal scrollbar knob with the `Pagebar button skin.hover` section as Child0 and the entry `Scrollbar Grip Horizontal` from [Boxes] as Child1:
```
[Scrollbar Horizontal Knob Skin]
Type = BoxStretch
StretchBorder = 2
Tile Center = scrollbar_knob/scrollbar_knob_horiz.png
Child0 = Pagebar button skin.hover
Child1 = Scrollbar Grip Horizontal
```

Clone

Clone = another section name
Value: another section name (without `[]` signs), default if no entry is `Nothing cloned`

Takes over the content from the desired section - in order to save a bit space inside the skin.ini; you have then to insert only the different or additional things into the current section.

The example below displays a source section and a clone section with it`s differences - the clone section contains only additional Margin left and the different Padding top:
```
[Source section]
Type = Box
Tile center = testimage.png
Margin top = 10
Margin bottom = 10
Padding top = 3
Padding bottom = 3
Padding left = 3

[Clone section]
Clone = Source section
Margin left = 20
Padding top = 6
```
In the example above `Padding right` and `Margin right` is lacking in source and clone, so the default of 2px for padding and 0px for margin is valid in source and clone. Also the lacking `Margin left` entry in the source section have there it`s default value of 0px.

So far, so good - but bear in mind:
- Never clone a state-subsection; then only the content of the subsection is taken over, but not the content of the primary main section! eg. do not clone the [Addressbar skin.hover] to the [Mainbar skin.hover], if you do so the [Mainbar skin.hover] contains all the things from the [Addressbar skin.hover] but not the padding/margin/spacing settings from the main section [Addressbar skin] (which are otherwise automatically taken over in the [Addressbar skin.hover]). You can use `Clone=` perhaps in order to copy a main section to a concerned subsection..., see also Section states in Section types and states.
- Blend from a .hover section cannot be cloned to a non-hover section, appears then `unblended`
- Padding default if no entry is 2px, Margin default if no entry is 0px, Spacing default if no entry is 0px
- If you use an image-file in two or more sections (eg cloned), then you cannot be sure that `Colorize = 0 / 1` works as expected; you see always the colorize state the image had if loaded the first time (and you cannot be sure which section is loaded first). So, if you plan to use `Colorize = 0 / 1` you should use an image-file only in one section (no clone)! see also Colorize
- Opera crashes if you have a loop inside your `clone-system`, eg if the source is a clone of the target and the target is a clone of the source
I don`t like Dolly; I`m not a friend of Clones with all these exceptions...

Width / Height

Width = x
Value in px, default if no entry is `No specific width`
Height = x
Value in px, default if no entry is `No specific height`

Specifies the size of an icon

In toolbar-sections and button-sections the entries Width and Height have normally no effect, but there is an effect if you define an icon in a common section instead in [Images] or [Boxes]. Here the effects in an icon-section listed per image-type:
- Box:
  Original width/height necessary - otherwise text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible but not directly visible (but space reserved in toolbar)
- Boxtile:
  Original width/height necessary - otherwise appears cropped/text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible but appears then horizontally and vertically tiled
- Boxtilehorizontal:
  Original width/height necessary - otherwise appears cropped/text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible but appears then horizontally tiled
- Boxtilevertical:
  Original width/height necessary - otherwise appears cropped/text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible but appears then vertically tiled
- Image:
  Original width/height necessary - otherwise appears smaller/text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible, appears then stretched/shrunken
- Boxstretch:
  Original width/height necessary - otherwise appears smaller/text incorrect aligned
  Icon size change - no effect
  Another size than the original - possible but appears then stretched/shrunken
In general: the specification of the original width/height seems to be mandatory, otherwise at least the icon text appears incorrect aligned, and; as long as Width and/or Height are defined, the icon is not affected by an icon size change (in Tools→ Appearance→ Skin→ `Icon size`)

A special case is the Checkbox skin in the standard-skin; at first glance the behaviour seems to be completely different than described above (defined as box type, but an icon size change to 160% have unsightly effects at least in dialogs), but there is a simple reason: the image-files `checkbox/unselected.png`/`checkbox/selected.png` are called also from the entries `Checkmark`/`Checkmark.selected` in [Images] (for menus) and the call there is the first call - so the image-type stays always `Image` from [Images], at least the image-type as well as width/height you define in the original checkbox-sections are useless then! But there are 2 pointers to a solution:
- Define the checkmark entries in [Images] as not scalable too (Checkmark = checkbox/unselected.png,1,,,,,,,,,0 and Checkmark.selected = checkbox/selected.png,1,,,,,,,,,0) - then an icon size change have never effect
- Define own copies of the .png`s for the checkmark entries in [Images] - then the checkboxes appears unscalable by icon size on toolbars and dialogs, but scalable in menus like the other icons there (my favorite)
The Radiobutton sections together with the `Bullet` entry in [Images] have the same problem, but here the radiobutton section is first called - also here I suggest to define own copies of the .png`s for the bullet-entry.

Please note that Width/Height and Scalable are not mentioned explicitely in the detailed info parts of this guide

Scalable

Scalable = x
Values: 1 is enabled, 0 is disabled, default if no entry is 0 in common sections, but 1 in [Boxes] and [Images]

Specifies if an element should be affected or not by Tools→ Appearance→ Skin→ `Icon size` and by the .mini state (.mini is realized only for the Statusbar button skin)

In toolbar-sections and button-sections the entry Scalable = 1 makes normally no sense (but have some effect depending on the image-type). Also if you define an icon in a common section instead of [Boxes] or [Images] the entry Scalable = 1 is not that useful (have some effect too, but not really the expected). The only reason for Scalable in common sections I found: use Scalable = 0 in common sections in order to make sure that it is 0 (default is 0 there, hihi).

But in [Boxes] and [Images] you can use it indeed in order to exclude an icon from all the size changes - there the Notation in Boxes and Images is valid, eg for the `Tile`-button in [Images] it should be `Tile vertically = buttons/tile.png,,,,,,,,,,0` (default if not defined there is 1)

There are some .png`s which are loaded from common sections but also from [Boxes]/[Images] - then the .png appears always with it`s scalable-status first loaded. You can use the scalable-option then in order to make sure that the first loaded .png have the desired scalable-status, eg see above the mentions about checkboxes in Width/Height. But also the `Down arrow` in [Boxes] which appears in dialogs on dropdown fields needs some attention (unsightly stretched there with another `Icon size`).

Please note that Width/Height and Scalable are not mentioned explicitely in the detailed info parts of this guide

Comments

;Comments and lines commented out
Every line in the skin.ini starting with ; or # is ignored by Opera. In order to comment out a whole section you have to comment out the section title and all lines, otherwise the section above the current takes over the entries.

Lines commented out in in the skin.ini:
```
;[Pagebar skin]
;Type = Box
;Tile center = pagebar.png

#[Pagebar button skin]
#Type = Boxstretch
#Tile center = button.png

;This is a comment: everything inside this example is ignored
```

All sections - alphabetical | grouped | visual

Section types and states
Section entries
Defaults
Boxes | Images | Notation
Special sections Info, Options and Generic
Special headers
Fallback
General rules

Version numbers in this guide
Latest changes in this guide
Credits and links

Skin changelogs