Add a SKIN_MAKING.md file

Instead of duplicating the general skin-making advice in all 12 stkskin.xml files, centralize it in one place.

Also correct header comments regarding the theme names.
This commit is contained in:
Alayan 2024-05-27 12:08:08 +02:00
parent fa0bb71c3a
commit d79cca3667
No known key found for this signature in database
12 changed files with 107 additions and 736 deletions

79
data/skins/SKIN_MAKING.md Normal file
View File

@ -0,0 +1,79 @@
# Making a skin
To make your own skin, the easiest way is to start with the files from a standard skin
and modifying them as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in the stkskin.xml file of a theme will be inherited from the specified
base theme, if any. To specify a base theme, add base_theme="themename" to the `<skin>` tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
```
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
```

View File

@ -1,87 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
The Cartoon Coal skin is based on the Cartoon skin
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
Cartoon Skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon - Coal" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -1,87 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
The Cartoon Desert skin is based on the Cartoon skin
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon - Desert" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -1,75 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
The Cartoon Forest skin is based on the Cartoon skin
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon - Forest" author="LCP and QwertyChouskie" base_theme="cartoon">
<skin name="Cartoon - Forest" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
<!--
Here you can configure advanced theming rules for this skin

View File

@ -1,87 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
The Cartoon Ocean skin is based on the Cartoon skin
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon - Ocean" author="LCP and QwertyChouskie" base_theme="cartoon">
<skin name="Cartoon - Ocean" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -1,23 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Cartoon Ruby skin by LCP, QwertyChouskie and CrystalDaEevee, released under CC-BY-SA 4.0+
See the Cartoon skin for further info.
The Cartoon Ocean skin is based on the Cartoon skin
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon - Ruby" author="LCP and QwertyChouskie (edited by CrystalDaEevee)" base_theme="cartoon">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -3,85 +3,13 @@
Cartoon skin by LCP and QwertyChouskie, released under CC-BY-SA 4.0+
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Cartoon" author="LCP and QwertyChouskie">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<advanced normal_ttf="Inter-UI-Black.ttf NotoSansThai-Black.ttf NotoSansHebrew-Black.ttf NotoSansArabicUI-Black.ttf NotoSansMalayalam-Bold.ttf" />

View File

@ -1,90 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Coal skin is based on Ocean skin
The Coal skin is based on the Ocean skin
Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Coal" author="Alayan" base_theme="peach">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -1,90 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Forest skin is based on Ocean skin
The Forest skin is based on the Ocean skin
Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Forest" author="Benau" base_theme="peach">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -5,85 +5,13 @@ Ocean skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Ocean" author="Dakal & Marianne Gagnon (Auria)" base_theme="peach">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -5,85 +5,13 @@ Peach skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
See SKIN_MAKING.md for more details on how the skin elements work.
-->
<skin name="Peach" author="Dakal & Marianne Gagnon (Auria)">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->

View File

@ -1,90 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Ruby skin is based on Peach skin
The Ruby skin is based on the Peach skin
Peach skin by Dakal and Marianne Gagnon, released under creative-commons BY-SA 3.0+
Except background.jpg, by elisee
Except stars, by s@f
To make your own skin, I suggest simply duplicating this file and modifying it as needed.
There are two types of images : some will be simply stretched as a whole, others will
have non-stretchable borders (you cannot choose which one you must use, it's hardcoded
for each element type; though, as you will see below, for all "advanced stretching" images
you can easily fake "simple stretch")
See SKIN_MAKING.md for more details on how the skin elements work.
All elements will have at least 2 properties :
type="X" sets what you're skinning with this entry
image="skinDirectory/imageName.png" sets which image is used for this element
Most elements also support states :
state="neutral"
state="focused"
state="down"
You can thus give different looks for different states. Not all widgets support all states,
see entries and comments below to know what's supported.
Note that checkboxes are an exception and have the following styles :
"neutral+unchecked"
"neutral+checked"
"focused+unchecked"
"focused+checked"
"deactivated+unchecked"
"deactivated+checked"
"Advanced stretching" images are split this way :
+----+--------------------+----+
| | | |
+----+--------------------+----+
| | | |
| | | |
| | | |
+----+--------------------+----+
| | | |
+----+--------------------+----+
The center border will be stretched in all directions. The 4 corners will not stretch at all.
Horizontal borders will stretch horizontally, verticallt borders will stretch vertically.
Use properties left_border="X" right_border="X" top_border="X" bottom_border="X" to specify
the size of each border in pixels (setting all borders to '0' makes the whole image scaled).
In some cases, you may not want vertical stretching to occur (like if the left and right sides
of the image must not be stretched vertically, e.g. for the spinner). In this case, pass
parameter preserve_h_aspect_ratios="true" to make the left and right areas stretch by keeping
their aspect ratio.
Some components may fill the full inner area with stuff; others will only take a smaller
area at the center. To adjust for this, there are properties "hborder_out_portion" and "vborder_out_portion"
that take a float from 0 to 1, representing the percentage of each border that goes out of the widget's
area (this might include stuff like shadows, etc.). The 'h' one is for horizontal borders,
the 'v' one is for vertical borders.
Finnally : the image is split, as shown above, into 9 areas. In some cases, you may not want
all areas to be rendered. Then you can pass parameter areas="body+left+right+top+bottom"
and explicitely specify which parts you want to see. The 4 corner areas are only visible
when the border that intersect at this corner are enabled.
When there is a common="y" with image tag, the image will be loaded only from data/skins/common in stk-code.
Any information not specified in this theme will be inherited from the specified base theme,
if any. To specify a base theme, add base_theme="themename" to the <skin> tag.
To use an icon theme, place the replacement icons (PNG or SVG) into [skin folder]/data/gui/icons
STK will prefer these icons first, if not found it will fallback to icons from the base theme(s).
-->
<skin name="Ruby" author="Benau" base_theme="peach">
<!--
Here you can configure advanced theming rules for this skin
For TTF specify the list like the following, for normal and digit ttf it will be added at the beginning of the
font list in STK, so those TTF will be used first, and any missing characters will be rendered from the base
theme font list. For color emoji ttf it will replace the base theme color emoji directly. You are not required
to specify all types of ttf.
<advanced normal_ttf="xxx.ttf yyy.ttf"
digit_ttf="zzz.ttf"
color_emoji_ttf="www.ttf"/>
-->
<!-- Stateless -->