Section types and states

All sections - alphabetical | grouped | visual

Section types: .top / .left / .bottom / .right / .large

Section states: .pressed, .selected, .open, .hover, .attention, .disabled, .focused, .mini


Note: in this guide the term `Main section` means a section without type/states and `Subsection` means a section with type and/or states

The notation order for section types and states:

A subsection can have one of the following types: .top / .left / .bottom / .right / .large - two or more types together like .left.large are not possible

A subsection can have one or several states: .pressed, .selected, .open, .hover, .attention, .disabled, .focused, .mini

You can combine a type with one or several states; the order is then as follows: first the type and secondly the state(s) in the order specified above.

Here some correct examples:

• [Test section]
  [Test section.hover]
  [Test section.selected.hover]
  [Test section.hover.attention]
  [Test section.selected.hover.attention]
  [Test section.selected.hover.attention.mini]
  
  [Test section.bottom]
  [Test section.bottom.hover]
  [Test section.bottom.selected.hover]
  [Test section.bottom.hover.attention]
  [Test section.bottom.selected.hover.attention]
  [Test section.bottom.selected.hover.attention.mini]
  

  
  Note that the placement types .top, .left, .bottom, .right are normally in use for toolbar-sections only; they have no effect in button-sections.
  
  Bear in mind also that the states are in use for button-sections usually - in toolbar-sections they affects only the text colors (if not already defined in the concerned button-sections).
  
  Note as well that .selected.hover for the Tab button skin as well as for the Pagebar button skin and Pagebar thumbnail button skin have not the expected effect, and that .pressed.selected have no effect there!

Section types:

• .top, .left, .bottom, .right
  Defines what you see if someone changes the toolbar placement in Tools→ Appearance→ Toolbars→ Placement. In some cases changes then only the buttons placement inside the toolbar.
  
  Only toolbar-sections are affected; in button-sections the placement types have no effect
  
  A subsection can have only one type - two or more types together like .left.large are not possible
  
  If you have no placement subsections, then the settings/entries from the main section are valid for all places. But if you have placement subsections defined, you have to specify all the settings anew; there are no settings taken over from the main section!
  
  The .top section is valid only for the placement at the top - in most cases not needed because already defined by the main section; so normally you should have the main section, as well as the subsections for .left, .bottom and .right - if desired/necessary


• .large
  This old type we have in order to define a second set of larger buttons/icons which then can be chosen per toolbar by the user. But only under the condition that you have set the entry `Large images =` to the value 1 inside the general section [Options] (original is 0, default if not defined is 1) - with this change a checkbox for `Large images` appears in Tools→ Appearance→ Toolbars, see the screenshot:
  
  And then you have to define a larger image for each and every icon! For instance:
  

  [Options]
  Large images = 1
  ...
  
  [Images]
  Back = buttons/back.png
  Back.large = buttons/large-back.png
  Forward = buttons/forward.png
  Forward.large = buttons/large-forward.png
  Rewind = buttons/rewind.png
  Rewind.large = buttons/large-rewind.png
  Fast Forward = buttons/fast_forward.png
  Fast Forward.large = buttons/large-fast_forward.png
  
  (and so on!)
  

  Also for button-skins it is possible to define own .large sections (eg Toolbar button skin, Mainbar button skin or Addressbar button skin and so on). So it is imaginable to have only larger areas around the icons for .large (but no large icons then).
  
  Please note that .large is not mentioned explicitely in the detailed info parts of this guide

Section states:

States are normally in use for general button images like the Toolbar button skin or Mainbar button skin, but also every icon in [Boxes] and [Images] can have it`s own states, eg `Back =`, `Back.hover =`, `Back.pressed =` and so on

If you have no state sections, then the settings/entries from the main section/main entry are valid for all states

Padding, Margin and Spacing from the main section are taken over automatically in state subsections if not defined there (default if no entry!). All the other possible section entries you have to define separately in every subsection anew (except `Text zoom` in button-skins)! Also Blend you have to define separately in every .hover subsection.
I suggest to define all the necessary in every state-subsection anew - even if padding/margin/spacing is taken over automatically from the main section. Bear in mind again that also lacking entries have then effect with it`s defaults (padding = 2, margin = 0 and spacing = 0)! (see also note 1)

• .pressed
  Defines what you see if pressed.


• .selected
  Defines what you see if selected, eg on menu buttons or on the `Fit to width` button.


• .open
  Defines what you see if open. Currently in use for some icon entries in [Images], eg Folder.open, Group.open, Thread.open, Mail filter.open, Unite trash.open and Unite folder.open. Please note that .open is not mentioned explicitely in the detailed info parts of this guide.


• .hover
  Defines what you see if hovered. If you have no .hover subsection, then you see normally Operas default hover-color - currently a bright mauve (like on the scrollbar knob in the standard-skin). A hover-image you see always on top of the normal unhovered image, so you see also the unhovered image behind it if the hover-image have transparent parts. In .hover subsections you can use `Blend=` in order to define a general transparency, see Blend in Section entries.


• .attention
  Defines what you see in some special cases (eg `Selector button skin.attention` appears if mails arrived / downloads finished, or the `Trash Large.attention` appears if a popup blocked, also pagebar buttons if finished loading but unread).


• .disabled
  Defines what you see if disabled/deactivated/not available, eg greyed out buttons (the button is greyed out too even if a .disabled button is defined, but `Color=` is not affected). Defines as well the (grey) text color.


• .focused
  Defines what you see if focused (not in use). Currently .focused have some effect (bg color only) at least on the Treeview skin, Panel treeview skin, Detailed panel treeview skin and Listitem skin. Note also the similar entries in the general section [Generic]. Please note that .focused is not mentioned explicitely in the detailed info parts of this guide.


• .mini
  Currently only realized for the `Statusbar`, see note 2 and the similar explanations in Statusbar button skin. Please note that .mini is not mentioned explicitely in the detailed info parts of this guide.

• Note 1: 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... (I`m not a friend of Clone with all the exceptions), see also Clone in Section entries.
• 
  
• Note 2: The statusbar is the only toolbar where the .mini state is realized. There are 3 conditions therefore:
  
  1. Mini-condition: the entry `Mini buttons = 1` inside the concerned section of the Toolbar.ini; here the [Status Toolbar.style] section
  
  2. Mini-condition: the .mini subsections for the concerned button section inside the skin.ini; here the [Statusbar Button Skin.mini], [Statusbar Button Skin.hover.mini] and [Statusbar Button Skin.selected.mini] (and in order to be complete also .attention.mini, .disabled.mini and probably .pressed.mini) - all of these subsections should have reduced vertical padding (bear in mind, the default is 2px if not defined!)
  
  3. Mini-condition: but that`s not all; each and every button or field which can be dropped to the toolbar should have it`s .mini version, eg the zoom field at the right (Dropdown skin.mini). In my opinion we have to much of these `unminified` things, resp.; it is not always possible to find solutions for all the possible fields.
  
  If the above conditions are fulfilled, you have buttons with minimized padding (and displayed with 80% of original size) and fields with minimized space at the top/bottom. Important: only buttons/icons with a height larger than 16px are affected by the 80% rule!
  
  It is possible to exclude specific buttons defined in [Images] from the .mini state, therefore it is necessary to set the scalable-parameter (10th) there to 0, eg `Unite Disabled = unite/unite_disabled.png,,,,,,,,,,0` or `Link Disabled = link/disabled.png,,,,,,,,,,0` in [Images] (but because they have only 16px height they are not affected by the 80% thing; but it works with larger buttons/icons)
  
  The .mini subsection for the toolbar section inside the skin.ini; the [Statusbar Skin.mini] like in the standard-skin seems to have effect only for `Text color =`!

All sections - alphabetical | grouped | visual

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

-