Notation in Boxes and Images

All sections - alphabetical | grouped | visual

Notation in [Boxes] and [Images]:

For Opera it is not important where inside the skin.ini an image is defined; you can define it as full-featured common section with all the possible entries/options there (see Section entries) or as simple entry in [Boxes] or [Images] with reduced options (only Colorize, Margin, Padding and Scalable). An entry in [Boxes] / [Images] can have it`s own states like .hover, .selected and so on, as well as the type .large (other types makes normally no sense for an icon), see Section types and states.

Entries in [Boxes] are in use normally for icons with a fixed size and corresponds to the image-type Box
Entries in [Images] are in use normally for icons with a variable size and corresponds to the image-type Image

An entry in Boxes/Images looks for instance as follows:

Back = buttons/back.png,1,2,3,4,5,6,7,8,9,10

• 1: Colorize, value 1 is enabled / 0 is disabled, default if no notation is 0 (but 1 in common sections, see Colorize)


• 2: Margin left, value in px, default if no notation is 0 (and 0 too in common sections, see Margin)
  3: Margin top, value in px, default if no notation is 0 (and 0 too in common sections)
  4: Margin right, value in px, default if no notation is 0 (and 0 too in common sections)
  5: Margin bottom, value in px, default if no notation is 0 (and 0 too in common sections)


• 6: Padding left, value in px, default if no notation is 0 (but 2 in common sections, see Padding)
  7: Padding top, value in px, default if no notation is 0 (but 2 in common sections)
  8: Padding right, value in px, default if no notation is 0 (but 2 in common sections)
  9: Padding bottom, value in px, default if no notation is 0 (but 2 in common sections)


• 10: Scalable, value 1 is enabled / 0 is disabled, default if no notation is 1 (but 0 in common sections, see Scalable)

Note that not all of the parameters are available in every situation...

It is not necessary to define always all parameters; lacking parameters have it`s default value. Below you see some valid examples.

• Colorize enabled (others default):

  [Boxes]
  Back = buttons/back.png,1
  

• Colorize enabled, Margin left 10px, Margin top 15px (others default):

  [Boxes]
  Back = buttons/back.png,1,10,15
  

• Colorize default (disabled), Margin left default (0px), Margin top 20px (others default):

  [Boxes]
  Back = buttons/back.png,,,20
  

• Colorize disabled, Margin left default (0px), Margin top 30px, Margin right default (0px), Margin bottom default (0px), Padding left 10px (others default):

  [Images]
  Back = buttons/back.png,0,,30,,,10
  

• Colorize enabled, all Margin default (0px), all Padding default (0px), Scalable disabled:

  [Images]
  Back = buttons/back.png,1,,,,,,,,,0
  

• Colorize default (disabled), all Margin default (0px), all Padding default (0px), Scalable disabled:

  [Images]
  Back = buttons/back.png,,,,,,,,,,0
  

• Note 1: There are differences between common sections and the short notation sections Boxes and Images. These distinctions are very often sources of trouble and misunderstandings.
  
  You should never use the same .png file in common sections and [Boxes]/[Images] together - then the .png have always the settings and defaults from the place where it was first loaded - it is impossible then to change something in the other places. So I strongly suggest to use always separate copies of a .png (or with other words: never use a .png twice ore more times). See the complications mentioned as note1 and note2 for the Checkbox skin...

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

-