ttt-skin guide

[Pagebar Thumbnail Button Skin]

Description: visual tabs in the tab bar
Version: since 10.0 in skin.ini, since 10.0 implemented
Visible: if View→ Toolbars→ `Tab Bar` enabled and Appearance→ Toolbars→ `Enable thumbnails in tabs` enabled
Related: Pagebar skin: general bg for the whole normal/visual tab bar, 9.0›
Pagebar thumbnail skin: bg behind visual tab bar thumbnails (spinner and border width), 10.0›
Pagebar thumbnail title skin: title area for visual tabs, 10.0›

Related normal tab part:
Pagebar button skin: normal tabs in the tab bar, 9.0›

As well as:
Pagebar close button skin: close button on normal/visual tabs, 9.0›
Pagebar locked button skin: icon on normal/visual tabs if locked, 9.0›

Please note that clones or cloned skins are not mentioned as related in this guide!

Padding top/bottom: -
Padding left: ✔ increases/decreases the whole thumbnail button horizontally (pos./neg. values) - good to know
Padding right: ✔ increases/decreases the whole thumbnail button horizontally too, but shifts the close button into the title part (pos. values) or shifts the close button outside (neg. values)!
Margin top/bottom: ✔ increases/decreases the space to the top/bottom (and increases/decreases then the whole thumbnail button vertically), with the neg. value -5 the `socket` is gone in the standard-skin
Margin left/right: ✔
Note, that the overall maximum height of the pagebar here is given by the size of the current monitor - unchangeable by the skin! See also note 1
Note also, that the border width around the thumbnails are defined by the padding in the Pagebar thumbnail skin, see also note 5
Spacing: -
Color: ✔
Colorize: ✔
Border/Border color: ✔
Text color: ✔ priority [Pagebar thumbnail title skin] - [Pagebar thumbnail skin] - [Pagebar thumbnail button skin] - [Pagebar skin] - [Browser window skin]→ 3d-objects from OS
Text bold: -
Text underline: -
Text shadow/Text shadow color: -
Text zoom: -
Blend: ✔
Child: ✔
Clone: ✔
If no image / no color in the section, you see: [Pagebar skin] - [Browser window skin]→ Black bg

Section-types: .top, .left, .bottom, .right
Section-states: .hover, .selected, .pressed, .attention
- .attention is here for unread with the blue dot (note also .hover.attention in the standard-skin)
- .selected.hover have effect, but not the expected!

If no section, Info-Version 3 and
- Options-Fallback background 1, you see: [Pagebar thumbnail button Skin] from standard-skin
- Options-Fallback background 0, you see: [Pagebar skin] from current-skin
If no section, Info-Version 2 and
- Options-Fallback background 1, you see: [Pagebar thumbnail button Skin] from standard-skin
- Options-Fallback background 0, you see: [Pagebar skin] from current-skin

Note 1: about the current height of the pagebar, see Opera:config-UserPrefs-PagebarHeight

Note 2: the images for the visual tabs in the standard-skin have some px shadows at the left/right as well as the `socket` at the bottom - by design. Due too these shadows and the rounded corners at the bottom of the normal tab images, it is not possible to have really the same width for normal and visual tabs - but if you have no shadows or similar shadows in your images then you can have the same width; trouble-free.

Note 3: it is possible to define `Text underline` and `Text shadow/Text shadow color` in the [Pagebar thumbnail title skin] - also for the state sections there (for `Text bold` I cannot find a possibility)

Note 4: the entry `PageCloseButtonOnLeft = 1` in [Options] places the close/locked buttons on left (default if no entry is 0) - for normal and visual tabs. You can define there also `PageCloseButtonOnTop = 1` (default if no entry is 0) - for normal tabs only, as well as both entries together for the close/locked buttons at the left in visual tabs and at the top/left in normal tabs, see the entries in [Options]
Note also, that the settings for Margin in Pagebar close button skin and Pagebar locked button skin affects the view here too.

Note 5: during loading you see the transparent Pagebar thumbnail skin with the `Pagebar thumbnail busy image` from [Images] on top (the animated spinner); the padding there defines the width of the border around the thumbnail (text and close/locked buttons included - remember also the shadows at the left/right and the `socket` at the bottom)

Note 6: also the padding settings in the Pagebar thumbnail title skin affects the view - at least in order to adjust the title and close/locked buttons vertically, but also for the horizontal space in front of the title

Note 7: the entries `Pagebar max button width = 70` and `Pagebar min button width = 70` in [Options] affects the width of the normal and visual tabs (eg 70px here). Normally for both entries the same value is ok (sometimes you have to `reload` the skin in order to make it valid). It seems that the value is then added to the padding left settings here for the visual tabs, see the entries in [Options]

Note 8: unfortunately the doubleclick on the resize dots for the visual tabs cannot remember the tab bar height you had before. But this button does the job - please drag the following button to the tab bar head, floating or tail part: BUTTON

Note 9: Here all the related skins; first the normal tab bar skin parts together:

Not included in the above `integrated work of art`, but to see too on the normal tab bar buttons (partly if Tools→ Preferences→ Advanced→ Browsing→ Page icons→ `Show no icons` chosen):

And here the separate visual tab bar skin parts together (only those which are not already mentioned above):

Not included in the above overview, but to see too on the visual tab bar buttons (while loading):