[Tab button Skin]

All sections - alphabetical | grouped | visual

• Description: tab buttons in tabbed dialogs
• Version: at least since 9.0 in skin.ini, at least since 9.0 implemented
• Visible: eg Tools→ Preferences
• Related: Tabs skin: bg part behind tab buttons in tabbed dialogs, 9.0›
  Dialog skin: outer bg for all dialogs, 9.0›
  Dialog page skin: inner bg for all dialogs, 9.0› or Dialog tab page skin: separate inner bg for tabbed dialogs, 9.0›

• Padding: ✔
• Margin: ✔
• Spacing: - but possible for the `Tabs skin`
• Color: ✔
• Colorize: ✔
• Border/Border color: ✔
• Text color: ✔ priority [Tab button skin] - [Tabs skin] - [Dialog skin]→ 3D-ojects from OS
• Text bold: ✔ works fine in state-sections only
• Text underline: ✔
• Text shadow/Text shadow color: ✔
• Text zoom: -
• Blend: ✔
• Child: ✔
• Clone: ✔
• If no image / no color in the section, you see: [Tabs skin] - [Dialog skin]→ Black bg

About Section entries
About Defaults

• Section-types: -
• Section-states: .hover, .selected, .pressed (.selected.hover have not the expected effect and .selected.pressed is not possible!)

About Section types and states

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

About Fallback

• Note 1: the standard-skin for Opera 10.0 shows a grey halftransparent 1px line at the bottom of the Tabs skin (tab_button/dialog-tab-bkgd.png):
  


• Note 2: the tab buttons are affected by the entry `Center tabs = 1` in [Options]


• Note 3: if you add to much padding/margin left/right in the [Tab button Skin] and padding/spacing in the Tabs skin, it is possible that in the `Edit site preferences dialog` (rightclick on a webpage) a tab disappears - if you see there: General, Cookies, Content, Display, Scripting and Network tab buttons, then everything is ok.


• Note 4: tabbed dialogs can have an own inner bg, the Dialog tab page skin: separate inner bg for tabbed dialogs, 9.0›

Tip

Tip: margin/padding for tab buttons in tabbed dialogs

Every skinner knows how difficult it is to set correct top/bottom margin and padding for the tab buttons if they should have different height for normal, .hover and .selected. But with the sample below it`s very easy - please follow the steps 1-4 or see the summary downwards the page

- Step 1: Copy the sample and adapt the image paths

• Replace the sections [Tabs skin], [Tab Button Skin], [Tab Button Skin.hover] and [Tab Button Skin.selected] in your custom skin.ini with the sample sections below and adapt then the image type and image paths if they are different
• Please note that the sample is suitable for the image types Boxstretch, Boxtile or Image - the other types are not that suitable for the tab buttons. If you use the type Boxtile, the images for normal, .hover and .selected should have the same height - it is easier then
• The following sample sections defines the tab buttons for now without different height - the bottom line of the tab images is colorized in red in order to see the differences:
  

  [Tabs Skin]
  Type					= BoxStretch
  Tile Center				= tab_button/dialog-tab-bkgd.png
  StretchBorder				= 5
  Padding Left				= 3
  Padding Right				= 3
  ;
  Padding Top			= 0
  Padding Bottom			= 0
  
  [Tab Button Skin]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #333333
  ;
  Margin Top			= 0
  Margin Bottom 			= 1
  Padding Top			= 5
  Padding Bottom			= 4
  
  
  [Tab Button Skin.hover]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button_hover.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #121212
  ;
  Margin Top			= 0
  Margin Bottom 			= 1
  Padding Top			= 5
  Padding Bottom			= 4
  
  
  [Tab Button Skin.selected]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button_selected.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #121212
  ;
  Margin Top			= 0
  Margin Bottom			= 0
  Padding top			= 5
  Padding Bottom 		= 5
  

  Result of step 1:
  
  This is the base for the next 3 steps - approx. what we have in the standard-skin for Opera 10, a little bit corrected but above all every section defined separately; without clones. Note the different Padding/Margin bottom for .selected; necessary for the white floating connection to the inner dialog background. Note also: the blue line below the normal and .hover tabs is defined by the `Tabs skin`.

- Step 2: Adapt the desired height for .hover and .selected

• With `Padding bottom =` for .hover and .selected you can adapt the height for these parts
• In order to have at the end 3px more height from normal to .hover and 6px more height from normal to .selected add now these values to the bottom paddings in the .hover and .selected sections:

  [Tab Button Skin.hover]
  Padding Bottom				= 7
  ;formerly 4
  
  [Tab Button Skin.selected]
  Padding Bottom 				= 11
  ;formerly 5
  

  Result of step 2:
  
  Looks not that nice at the moment, but we are on the right way...

- Step 3: Adjust the bottom margin for normal and .hover

• With `Margin bottom =` for normal and .hover you have to adjust now the bottom space for these parts
• The Padding bottom you added to .selected in step 2 you have now to subtract from Margin bottom for normal - so you have to subtract 6px from Margin bottom for normal. The difference between Padding bottom in .hover and Padding bottom in .selected you have now to subtract from Margin bottom for .hover - so you have to subtract 4px from Margin bottom for .hover:

  [Tab Button Skin]
  Margin Bottom 				= -5
  ;formerly 1
  
  
  [Tab Button Skin.hover]
  Margin Bottom 				= -3
  ;formerly 1
  

  Result of step 3:
  

- Step 4: Adjust the vertical text paddings for normal, .hover and .selected

• Perhaps you wish to shift the text on the tab buttons a bit more to the bottom or top - simply change the `Padding top to Padding bottom ratio` for the desired sections in order to move the text vertically (but do not change the total amount)
• Here I changed for instance the Padding top/bottom ratio for .hover from 5/7 to 7/5 (amount 12) and the one for .selected from 5/11 to 9/7 (amount 16):

  [Tabs Skin]
  Type					= BoxStretch
  Tile Center				= tab_button/dialog-tab-bkgd.png
  StretchBorder				= 5
  Padding Left				= 3
  Padding Right				= 3
  ;
  Padding Top			= 0
  Padding Bottom			= 0
  
  [Tab Button Skin]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #333333
  ;
  Margin Top			= 0
  Margin Bottom 			= -5
  Padding Top			= 5
  Padding Bottom			= 4
  
  
  [Tab Button Skin.hover]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button_hover.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #121212
  ;
  Margin Top			= 0
  Margin Bottom 			= -3
  Padding Top			= 7
  Padding Bottom			= 5
  ;formerly 5/7
  
  
  [Tab Button Skin.selected]
  Type					= BoxStretch
  Tile Center				= tab_button/tab_button_selected.png
  StretchBorder				= 6
  Margin Left				= 0
  Margin Right				= 0
  Padding Left				= 10
  Padding Right				= 10
  Text Color				= #121212
  ;
  Margin Top			= 0
  Margin Bottom			= 0
  Padding top			= 9
  Padding Bottom 		= 7
  ;formerly 5/11
  

  Result of step 4:
  
  The above sample is complete - all steps included. Below how it looks without the color lines and in original size:
  

Summary

1: Make a proper base

• [Tabs skin] Padding top/bottom = 0/0
• [Tab Button Skin], [Tab Button Skin.hover] and [Tab Button Skin.selected] Margin top/bottom = 0/0 and Padding top/bottom = 5/5 for instance, but for all tab button sections the same values
• The different values in the standard-skin and the sample are an exception; results in 1px more space at the bottom for normal and .hover (in order to see the grey line from the `Tabs skin`)

2: Choose the desired height

• Add now Padding bottom for the tab button sections up to the desired height (padding bottom + font height + Padding top = overall height). That can be for all buttons the same height, or like in the sample; .hover higher than normal and .selected higher than hover.

3: Adapt the bottom

• If you have the same height for all the buttons you can skip this step
• If you have different heights (.hover higher than normal and .selected higher than hover):
  - the Padding bottom you added to .selected you have to subtract from Margin bottom for normal
  - the difference between Padding bottom .hover and .selected you have to subtract from Margin bottom for .hover

4: Adjust the text vertically

• In order to shift the text to the top or bottom, change now the ratio between Padding top and Padding bottom for the desired tab button sections, but do not change the total amount

More

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

-