¶ Introduction
The content of your theme files must follow a certain script. Each object must be placed within the <view></view> tags.
¶ Tag <view>
Interface screens are managed via so-called views. These views can have several attributes.
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which screen its content should act. It can have one of these values at the same time:
system: corresponds to the list of systems.setailed: corresponds to the list of games.menu: corresponds to the options menus.gameclip: corresponds to the “game clips” screen saver.
This attribute can have one or more values at the same time:
<view name=“system”>
...
</view>
<view name=“system, detailed”>
...
</view>
Using multiple values means you're using the same data in the <view> tag in different places (in the second example above, in the system view and the game list view).
¶ Object <image>
The <image> objects are used to display an image in the desired locations. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which visual element the content should act on. It can have one or more of these values at the same time.
List of usable values in the system list (<view name=“system”>):
logo: the system logo image.
List of values usable in the games list (<view name=“detailed”>) :
console: the image displaying the system console.logo: the system logo image.md_folder_image_0: on a folder, first thumbnail.md_folder_image_1: on a folder, second thumbnail.md_folder_image_2: on a folder, third thumbnail.md_folder_image_3: on a folder, fourth thumbnail.md_folder_image_4: on a folder, fifth thumbnail.md_folder_image_5: on a folder, sixth thumbnail.md_folder_image_6: on a folder, seventh thumbnail.md_folder_image_7: on a folder, eighth thumbnail.md_folder_image_8: on a folder, ninth thumbnail.md_image: location of scrap thumbnail image.md_region1: first region of the selected game.md_region2: second region of the selected set.md_region3: third region of the selected set.md_region4: fourth region of the selected set.
List of values that can be used in game clips (<view name=“gameclip”>) :
favoriteIcon: favorite icon.logo: the system logo image.md_image: location of scrap thumbnail image.md_thumbnail: scrap thumbnail.recalboxLogo: Recalbox logo.
<image name=“logo”>
...
</image>
¶ Attribute extra
You can create your own value for the name attribute outside the list above, but you'll need to add the extra=“true” attribute to be taken into account.
<image name=“background” extra=“true”>
...
</image>
¶ Attribute region
If you specify an image to be used for a specific region, you can use the region attribute.
<image name=“logo” region=“us”>
...
</image>
The <image> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top leftmost point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <maxSize>
This property is deprecated, and is retained for backward compatibility with existing themes. It will be removed in a future version of Recalbox.
The <maxSize> property prevents the parent object's element from being oversized on an axis. By default, the image will be resized as large as possible so that it adapts to this size and retains its aspect ratio.
Values are percentages between 0 (0%) and 1 (100%).
<maxSize>0.35 0.1</maxSize>
¶ Property <keepratio> 
The <keepratio> property preserves the ratio of the parent element. Use with <size>.
<keepratio>true</keepratio>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property allows you to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <path>
The <path> property lets you load a text file instead of entering text manually.
<path>./path/to/file/text.txt</path>
¶ Property <tile>
The <tile> property lets you define whether the image is displayed as a mosaic instead of being stretched to fit the size of the object. This is useful for backgrounds.
<tile>false</tile>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <colorTop>
The <colorTop> property is used to specify the top color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTop>666666</colorTop>
¶ Property <colorBottom>
The <colorBottom> property is used to specify the color of the bottom of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottom>666666</colorBottom>
¶ Property <colorLeft>
The <colorLeft> property is used to specify the left color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorLeft>666666</colorLeft>
¶ Property <colorRight>
The <colorRight> property is used to specify the right-hand color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorRight>666666</colorRight>
¶ Property <colorTopLeft>
The <colorTopLeft> property is used to specify the color at the top left of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTopLeft>666666</colorTopLeft>
¶ Property <colorTopRight>
The <colorTopRight> property is used to specify the color at the top right of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTopRight>666666</colorTopRight>
¶ Property <colorBottomLeft>
The <colorBottomLeft> property is used to specify the color at the bottom left of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottomLeft>666666</colorBottomLeft>
¶ Property <colorBottomRight>
The <colorBottomRight> property is used to specify the color at the bottom right of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottomRight>666666</colorBottomRight>
¶ <zIndex> property
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Property <reflection>
The <reflection> property is used to create reflection effects below the parent object.
The first value corresponds to the upper part of the reflection, the second value corresponds to the lower part of the reflection.
Values can range from 0.0 (transparent) to 1.0 (opaque).
<reflection>0.5 0.5</reflection>
¶ Object <box> 
The <box> objects can be used to create decorative color zones in desired locations. This object can have several attributes.
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
There's no list to provide; this content is yours alone.
The <box> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top-left point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
Values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counter-clockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property is used to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <colorTop>
The <colorTop> property is used to specify the top color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTop>666666</colorTop>
¶ Property <colorBottom>
The <colorBottom> property is used to specify the bottom color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottom>666666</colorBottom>
¶ Property <colorLeft>
The <colorLeft> property is used to specify the left color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorLeft>666666</colorLeft>
¶ Property <colorRight>
The <colorRight> property is used to specify the right-hand color of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorRight>666666</colorRight>
¶ Property <colorTopLeft>
The <colorTopLeft> property is used to specify the color at the top left of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTopLeft>666666</colorTopLeft>
¶ Property <colorTopRight>
The <colorTopRight> property is used to specify the color at the top right of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorTopRight>666666</colorTopRight>
¶ Property <colorBottomLeft>
The <colorBottomLeft> property is used to specify the color at the bottom left of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottomLeft>666666</colorBottomLeft>
¶ <colorBottomRight> property
The <colorBottomRight> property is used to specify the color at the bottom right of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<colorBottomRight>666666</colorBottomRight>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The Property <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Object <video>
The <video> objects are used to display video in the desired locations. This object can have several attributes.
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in the games list (<view name=“detailed”>) :
md_video: the video.
List of values usable in game clips (<view name=“gameclip”>):
md_video: the video.
The <video> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the highest point on the left of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <maxSize>
This property is deprecated, and is retained for backward compatibility with existing themes. It will be removed in a future version of Recalbox.
The <maxSize> property prevents the parent object's element from being oversized on an axis. By default, the image will be resized as large as possible so that it adapts to this size and retains its aspect ratio.
Values are percentages between 0 (0%) and 1 (100%).
<maxSize>0.35 0.1</maxSize>
¶ Property <keepratio>
The <keepratio> property preserves the ratio of the parent element. Use with <size>.
<keepratio>true</keepratio>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property allows you to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <path>
The <path> property lets you load an image file instead of setting an image manually.
<path>./path/to/file/image.png</path>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Property <animations>
The <animations> property is used to indicate the animation to be applied to the parent object.
List of possible values:
bump: sudden appearance from the bottom, the content bumps a little in front before resuming its initial size.breakingnews: swirling appearance.fade: progressive appearance.none: no animation.
If you use several different animations, only the last one will be used.
<animations>bump,breakingnews,fade</animations>
In the example above, only fade will be applied.
¶ Property <loops>
The <loops> property is used to indicate the number of times the content of the parent object is read.
<loops>true</loops>
¶ Property <delay>
The <delay> property is used to specify the delay before reading the parent object's content.
<delay>2</delay>
¶ Property <reflection>
The <reflection> property is used to create reflection effects below the parent object.
The first value corresponds to the upper part of the reflection, the second value corresponds to the lower part of the reflection.
Values can range from 0.0 (transparent) to 1.0 (opaque).
<reflection>0.5 0.5</reflection>
¶ Property <link>
Until Recalbox 9.2, the <image name=“md_image”> and <video name="md_video> objects were linked. Now they are not, and can have different properties.
The <link> property links these 2 objects together as before.
<link>md_image</link>
¶ Object <text>
The <text> objects are used to display text in the desired locations. This object can have several attributes.
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of usable values in the system list (<view name=“system”>):
systemInfo: the text indicating the number of games present in the system, with the number of favorite and hidden games.
List of values usable in the games list (<view name=“detailed”>):
logoText: the system name whenlogodoes not exist.md_lbl_rating: the text indicating the rating.md_lbl_releasedate: the text indicating the release date.md_lbl_developer: the text indicating the developer.md_lbl_publisher: the text indicating the publisher.md_lbl_genre: the text indicating the genre.md_lbl_lastplayed: the text indicating the last time you played the game.md_lbl_players: the text indicating the number of players.md_lbl_playcount: the text indicating the number of times the game has been played.md_lbl_favorite: text indicating whether the game is in the favorites list.md_developer: the developer.md_publisher: the publisher.md_genre: the genre.md_players: number of players.md_playcount: the number of times the game has been played.md_favorite: indicates whether the game is in the favorites list.md_description: game description text.md_folder_name: text accompanying thumbnails in a folder.
List of values that can be used in game clips (<view name=“gameclip”>):
logoText: the system name whenlogodoes not exist.md_lbl_gameName: the text indicating the name of the game.md_lbl_systemName: the text indicating the system name.md_lbl_rating: the text indicating the rating.md_lbl_releasedate: the text indicating the release date.md_lbl_developer: the text indicating the developer.md_lbl_publisher: the text indicating the publisher.md_lbl_genre: the text indicating the genre.md_lbl_lastplayed: the text indicating the last time you played the game.md_lbl_players: the text indicating the number of players.md_lbl_playcount: the text indicating the number of times the game has been played.md_lbl_favorite: text indicating whether the game is in the favorites list.md_gameName: the name of the game.md_developer: the developer.md_publisher: the publisher.md_genre: the genre.md_players: number of players.md_playcount: the number of times the game has been played.md_favorite: indicates whether the game is in the favorites list.md_description: game description text.md_systemName: the system name.
<text name=“md_developer, md_publisher, md_genre, md_playcount, md_lastplayed, md_description, md_players, md_releasedate, md_favorite”>
...
</text>
¶ Attribute extra
You can create your own value for the name attribute outside the list above, but you'll need to add the extra=“true” attribute to be taken into account.
<text name=“control” extra=“true”>
...
</text>
The <text> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top-left point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property is used to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <text>
The <text> property is used to insert text.
<text>Random text here</text>
You can also add text in several languages by specifying the language in the property.
<text.fr>Random text here</text.fr>
You can use only the language code as seen in the example above, but you can also specify the region as in the example below.
<text.en_us>Random text here</text.en_us>
You can have several languages defined in the theme, but on the first valid occurrence, the search for text to display will stop there.
Let's go into a little more detail with the following 2 examples:
<text text=“Washington” text.fr=“Paris” text.de_CH=“Berne” text.de=“Berlin” />
- If the user has set his Recalbox to
de_CH, then he'll get “Berne”, because it's the first one that matches his language or language + region. - If the user is German and has set his Recalbox to
de_DE, he will get “Berlin”, because only the language code will match on the last text.suffix. - If the user is French with
fr_FR. Quebecersfr_CAand Belgiansfr_BEwill also get Paris! - All those for whom nothing matches will get “Washington”.
<text text.de=“Berlin” text.de_CH=“Berne” text.fr=“Paris” text=“Washington” />
- Here nothing changes from the previous example, EXCEPT for users configured in
de_CHwho will have “Berlin”, because the language code oftext.dewill have a match beforetext.de_CHarrives.
Language codes are always 2 characters long and are available here.
Region codes are also 2 characters long and are available here.
¶ Property <path>
The <path> property lets you load a text file instead of entering text manually.
<path>./path/to/file/text.txt</path>
¶ Property <backgroundColor>
The <backgroundColor> property is used to define a background color to be applied to the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<backgroundColor>ffffff00</backgroundColor>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <alignment>
The <alignment> property lets you choose the alignment of the parent object. left = left alignment, center = centered and right = right alignment. The centered alignment also centers the parent object vertically.
<alignment>left</alignment>
¶ Property <forceUppercase>
The <forceUppercase> property is used to force the text of the parent object to be all uppercase. 0 = no change, 1 = force to uppercase.
<forceUppercase>1</forceUppercase>
¶ Property <lineSpacing>
The <lineSpacing> property controls the spacing between lines in the parent object according to the multiple of the font height.
<lineSpacing>1.5</lineSpacing>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Object <scrolltext>
The <scrolltext> objects are used to horizontally scroll text that is too long over a smaller area. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of usable values in the system list (<view name=“system”>):
systemInfo: the text indicating the number of games present in the system, with the number of favorite and hidden games.
List of values usable in the games list (<view name=“detailed”>):
md_lbl_rating: the text indicating the rating.md_lbl_releasedate: the text indicating the release date.md_lbl_developer: the text indicating the developer.md_lbl_publisher: the text indicating the publisher.md_lbl_genre: the text indicating the genre.md_lbl_lastplayed: the text indicating the last time you played the game.md_lbl_players: the text indicating the number of players.md_lbl_playcount: the text indicating the number of times the game has been played.md_lbl_favorite: text indicating whether the game is in the favorites list.md_developer: the developer.md_publisher: the publisher.md_genre: the genre.md_players: number of players.md_playcount: the number of times the game has been played.md_favorite: indicates whether the game is in the favorites list.md_description: game description text.
List of values that can be used in game clips (<view name=“gameclip”>):
md_lbl_gameName: the text indicating the name of the game.md_lbl_systemName: the text indicating the system name.md_lbl_rating: the text indicating the rating.md_lbl_releasedate: the text indicating the release date.md_lbl_developer: the text indicating the developer.md_lbl_publisher: the text indicating the publisher.md_lbl_genre: the text indicating the genre.md_lbl_lastplayed: the text indicating the last time you played the game.md_lbl_players: the text indicating the number of players.md_lbl_playcount: the text indicating the number of times the game has been played.md_lbl_favorite: text indicating whether the game is in the favorites list.md_gameName: the name of the game.md_developer: the developer.md_publisher: the publisher.md_genre: the genre.md_players: number of players.md_playcount: the number of times the game has been played.md_favorite: indicates whether the game is in the favorites list.md_description: game description text.md_systemName: the system name.
<scrolltext name=“md_developer, md_publisher, md_genre, md_playcount, md_lastplayed, md_description, md_players, md_releasedate, md_favorite”>
...
</scrolltext>
The <scrolltext> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top leftmost point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ <size> property
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property is used to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <text>
The <text> property is used to insert text.
<text>Random text here</text>
You can also add text in several languages by specifying the language in the property.
<text.fr>Random text here</text.fr>
You can use only the language code as seen in the example above, but you can also specify the region as in the example below.
<text.en_us>Random text here</text.en_us>
You can have several languages defined in the theme, but on the first valid occurrence, the search for text to display will stop there.
Let's go into a little more detail with the following 2 examples:
<text text=“Washington” text.fr=“Paris” text.de_CH=“Berne” text.de=“Berlin” />
- If the user has set his Recalbox to
de_CH, then he'll get “Berne”, because it's the first one that matches his language or language + region. - If the user is German and has set his Recalbox to
de_DE, he will get “Berlin”, because only the language code will match on the last text.suffix. - If the user is French with
fr_FR. Quebecersfr_CAand Belgiansfr_BEwill also get Paris! - All those for whom nothing matches will get “Washington”.
<text text.de=“Berlin” text.de_CH=“Berne” text.fr=“Paris” text=“Washington” />
- Here nothing changes from the previous example, EXCEPT for users configured in
de_CHwho will have “Berlin”, because the language code oftext.dewill have a match beforetext.de_CHarrives.
Language codes are always 2 characters long and are available here.
Region codes are also 2 characters long and are available here.
¶ Property <path>
The <path> property lets you load a text file instead of entering text manually.
<path>./path/to/file/text.txt</path>
¶ Property <backgroundColor>
The <backgroundColor> property is used to define a background color to be applied to the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<backgroundColor>ffffff00</backgroundColor>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <alignment>
The <alignment> property lets you choose the alignment of the parent object: left = left alignment, center = centered and right = right alignment. The centered alignment also centers the parent object vertically.
<alignment>left</alignment>
¶ Property <forceUppercase>
The <forceUppercase> property is used to force the text of the parent object to be all uppercase. 0 = no change, 1 = force to uppercase.
<forceUppercase>1</forceUppercase>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Object <textlist>
The <textlist> objects are used to display a list of text. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of values that can be used in the games list (<view name=“detailed”>) :
gamelist: the list of games in a system.
<textlist name=“gamelist”>
...
</textlist>
The <textlist> object can contain several other properties.
¶ <pos> property
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the highest point on the left of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <selectorHeight>
The <selectorHeight> property is used to apply a highlight height to elements of the parent object.
<selectorHeight>0.5</selectorHeight>
¶ Property <selectorOffsetY>
The <selectorOffsetY> property is used to apply a vertical offset value to the highlight.
<selectorOffsetY>0.5</selectorOffsetY>
¶ Property <selectorColor>
The <selectorColor> property lets you use a specific color to highlight elements of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectorColor>4368ffff</selectorColor>
¶ Property <selectorImagePath>
The <selectorImagePath> property is used to specify the path to an image to be used as the background for highlighting elements in the parent object.
<selectorImagePath>./path/to/file/image.png</selectorImagePath>
¶ Property <selectorImageTile>
The <selectorImageTile> property lets you define whether the image is displayed as a mosaic instead of being stretched to fit the size of the object. This is useful for backgrounds.
<selectorImageTile>false</selectorImageTile>
¶ Property <selectedColor>
The <selectedColor> property is used to define the color of highlighted text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectedColor>4368ffff</selectedColor>
¶ Property <primaryColor>
The <primaryColor> property is used to define the color of the game name text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<primaryColor>4368ffff</primaryColor>
¶ Property <secondaryColor>
The <secondaryColor> property is used to define the color of folder name text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<secondaryColor>4368ffff</secondaryColor>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <alignment>
The <alignment> property lets you choose the alignment of the parent object. left = left alignment, center = centered and right = right alignment. The centered alignment also centers the parent object vertically.
<alignment>left</alignment>
¶ Property <horizontalMargin>
The <horizontalMargin> property is used to apply a margin to the sides of list texts. Selectors and the list container continue to use 100% of the specified width.
<horizontalMargin>0.1</horizontalMargin>
¶ Property <forceUppercase>
The <forceUppercase> property is used to force the text of the parent object to be all uppercase. 0 = no change, 1 = forcing to uppercase.
<forceUppercase>1</forceUppercase>
¶ Property <lineSpacing>
The <lineSpacing> property controls the spacing between lines in the parent object according to the multiple of the font height.
<lineSpacing>1.5</lineSpacing>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Object <datetime>
The <datetime> objects are used to display a date and time. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in the play list (<view name=“detailed”>) :
md_lastplayed: the date on which the game was last launched.md_releasedate: game release date.
List of values usable in game clips (<view name=“gameclipview”>):
md_releasedate: the game release date.
<datetime name=“md_releasedate”>
...
</datetime>
The <datetime> object can contain several other properties.
¶ <pos> property
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the highest point on the left of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
Values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <alignment>
The <alignment> property lets you choose the alignment of the parent object. left = left alignment, center = centered and right = right alignment. The centered alignment also centers the parent object vertically.
<alignment>left</alignment>
¶ Property <forceUppercase>
The <forceUppercase> property is used to force the text of the parent object to be all uppercase. 0 = no change, 1 = force to uppercase.
<forceUppercase>1</forceUppercase>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Property <display>
The <display> property is used to indicate the date format to be displayed.
Possible values:
date: displays the date.dateTime: displays the date and time.year: displays the year.realTime: displays the real time.time: displays the time.RelativeToNow: displays the date relative to now (x days ago,x hours ago, etc.).
<display>date</display>
¶ Object <rating>
The <rating> objects are used to display the rating of a game. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in the games list (<view name=“detailed”>) :
md_rating: the game rating.
<rating name=“md_rating”>
...
</rating>
The <rating> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top leftmost point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
Values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <rotation>
The <rotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
<rotation>90</rotation>
¶ Property <rotationOrigin>
The <rotationOrigin> property is used to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<rotationOrigin>0.5 0.5</rotationOrigin>
¶ Property <filledPath>
The <filledPath> property is used to load an image file corresponding to the fill rate of the game note.
<filledPath>./path/to/file/image.png</filledPath>
¶ Property <unfilledPath>
The <unfilledPath> property is used to load an image file corresponding to the game's total score.
<unfilledPath>./path/to/file/image.png</unfilledPath>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Property <disabled>
The <disabled> property is used to disable the parent object.
<disabled>true</disabled>
¶ Object <sound>
The <sound> objects are used to play music in the interface. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of usable values in the system list (<view name=“system”>):
directory: the music folder.
<sound name=“directory”>
...
</sound>
The <sound> object can contain a single property.
¶ Property <path>
The <path> property is used to indicate a folder where to look for music to be played.
<path>./path/to/folder</path>
¶ Object <helpsystem>
The <helpsystem> objects are used to display the buttons at the bottom of the interface. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in the system list, game list, game clips and menus (<view name=“system, detailed, gameclip, menu”>):
help: the buttons at the bottom of the interface.
<helpsystem name=“help”>
...
</helpsystem>
The <helpsystem> object can contain several other properties.
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the highest point on the left of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <textColor>
The <textColor> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<textColor>666666</textColor>
¶ Property <iconColor>
The <iconColor> property is used to specify the color of the parent object's icon. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<iconColor>666666</iconColor>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <iconUpDown>
The <iconUpDown> property is used to specify the file representing the Up and Down buttons.
<iconUpDown>./path/to/file/image.png</iconUpDown>
¶ Property <iconLeftRight>
The <iconLeftRight> property is used to specify the file representing the Left and Right buttons.
<iconLeftRight>./path/to/file/image.png</iconLeftRight>
¶ Property <iconUpDownLeftRight>
The <iconUpDownLeftright> property is used to specify the file representing the Up, Down, Left and Right buttons.
<iconUpDownLeftRight>./path/to/file/image.png</iconUpDownLeftRight>
¶ Property <iconA>
The <iconA> property is used to specify the file representing the A button on an SNES controller.
<iconA>./path/to/file/image.png</iconA>
¶ Property <iconB>
The <iconB> property is used to specify the file representing the B button on an SNES controller.
<iconB>./path/to/file/image.png</iconB>
¶ Property <iconX>
The <iconX> property is used to specify the file representing the X button on an SNES controller.
<iconX>./path/to/file/image.png</iconX>
¶ Property <iconY>
The <iconY> property is used to specify the file representing the Y button on an SNES controller.
<iconY>./path/to/file/image.png</iconY>
¶ Property <iconL>
The <iconL> property is used to specify the file representing the L button on an SNES controller.
<iconL>./path/to/file/image.png</iconL>
¶ Property <iconR>
The <iconR> property is used to specify the file representing the R button on an SNES controller.
<iconR>./path/to/file/image.png</iconR>
¶ Property <iconStart>
The <iconStart> property is used to specify the file representing the Start button on an SNES controller.
<iconStart>./path/to/file/image.png</iconStart>
¶ Property <iconSelect>
The <iconSelect> property is used to specify the file representing the Select button on an SNES controller.
<iconSelect>./path/to/file/image.png</iconSelect>
¶ Object <carousel>
The <carousel> objects are used to display the list of systems. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of usable values in the system list (<view name=“system”>) :
systemcarousel: the system list.
<carousel name=“systemcarousel”>
...
</carousel>
The <carousel> object can contain several other properties.
¶ Property <type>
The <type> property is used to define the display direction of the system list. By default, the type is horizontal.
Possible values:
horizontal: list of systems oriented horizontally.vertical: list of systems oriented vertically.vertical_wheel: list of systems in a vertically oriented wheel.
<type>vertical</type>
¶ Property <size>
The <size> property is used to define the size of the element containing the parent object.
<size>1 1</size>
¶ Property <pos>
The <pos> property is used to indicate the position of the parent object. The position to be indicated corresponds to the top leftmost point of the object. It contains 2 values. The first value corresponds to positioning from the left, and the second to positioning from the top.
The values are percentages between 0 (0%) and 1 (100%).
<pos>0.33 0.25</pos>
In the example above, we can see that position indicates to position the parent object 33% from the left and 25% from the top.
¶ Property <origin>
The <origin> property is used to define a new origin starting point for all sizes of the parent object.
Values are percentages between 0 (0%) and 1 (100%).
<origin>0.5 0.5</origin>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <logoScale>
The <logoScale> property is used to apply a scale magnification to the parent object hovered over.
<logoScale>3</logoScale>
¶ Property <logoRotation>
The <logoRotation> property is used to specify a rotation angle for the parent object. Positive values will rotate clockwise, and negative values will rotate counter-clockwise.
<logoRotation>90</logoRotation>
¶ Property <logoRotationOrigin>
The <logoRotationOrigin> property is used to define a new origin starting point for all sizes of the parent object only if a rotation is to be performed.
Values are percentages between 0 (0%) and 1 (100%).
<logoRotationOrigin>0.5 0.5</logoRotationOrigin>
¶ Property <logoSize>
The <logoSize> property is used to define the size of the element containing the parent object.
<logoSize>1</logoSize>
¶ Property <logoAlignment>
The <logoAlignment> property lets you choose the alignment of the parent object. left = left alignment, center = centered and right = right alignment. The centered alignment also centers the parent object vertically.
<logoAlignment>left</logoAlignment>
¶ Property <maxLogoCount>
The <maxLogoCount> property is used to specify the total number of logos visible.
<maxLogoCount>7</maxLogoCount>
¶ Property <defaultTransition>
The <defaultTransition> property is used to indicate the default transition.
Possible values:
fade: displays a fade to black between system changes.instant: instantaneous movement at system change.slide: glides between system change like a slide change.
<defaultTransition>slide</defaultTransition>
¶ Property <zIndex>
The <zIndex> property is used to order elements by depth / layer. The greater its value, the more it will be in the foreground. It can be negative.
<zIndex>10</zIndex>
¶ Object <menuBackground>
The <menuBackground> object lets you customize the menu background. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menubg: menu background.
<menuBackground name=“menubg”>
...
</menuBackground>
The <menuBackground> object can contain several other properties.
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <path>
The <path> property is used to load an image file.
<path>./path/to/file/image.png</path>
¶ Property <fadePath>
The <fadePath> property is used to load an image file to semi-darken the menu background.
<fadePath>./path/to/file/image.png</fadePath>
¶ Object <menuIcons>
The <menuIcons> objects are used to customize the menu background. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menuicons: menu icons.
<menuIcons name=“menuicons”>
...
</menuIcons>
The <menuIcons> object can contain several other properties.
¶ Property <iconKodi>
The <iconKodi> property is used to load an image file for the line to launch Kodi in the menus.
<iconKodi>./path/to/file/image.png</iconKodi>
¶ Property <iconSystem>
The <iconSystem> property is used to load an image file for the system settings menu line.
<iconSystem>./path/to/file/image.png</iconSystem>
¶ Property <iconUpdates>
The <iconUpdates> property is used to load an image file for the update menu line.
<iconUpdates>./path/to/file/image.png</iconUpdates>
¶ Property <iconGames>
The <iconGames> property is used to load an image file for the game options menu line.
<iconGames>./path/to/file/image.png</iconGames>
¶ Property <iconControllers>
The <iconControllers> property is used to load an image file for the joystick settings menu line.
<iconControllers>./path/to/file/image.png</iconControllers>
¶ Property <iconUI>
The <iconUI> property is used to load an image file for the interface options menu line.
<iconUI>./path/to/file/image.png</iconUI>
¶ Property <iconSound>
The <iconSound> property is used to load an image file for the sound options menu line.
<iconSound>./path/to/file/image.png</iconSound>
¶ Property <iconNetwork>
The <iconNetwork> property is used to load an image file for the network options menu line.
<iconNetwork>./path/to/file/image.png</iconNetwork>
¶ Property <iconScraper>
The <iconScraper> property is used to load an image file for the scraper menu line.
<iconScraper>./path/to/file/image.png</iconScraper>
¶ Property <iconAdvanced>
The <iconAdvanced> property is used to load an image file for the advanced settings menu line.
<iconAdvanced>./path/to/file/image.png</iconAdvanced>
¶ Property <iconQuit>
The <iconQuit> property is used to load an image file for the menu line to exit the interface.
<iconQuit>./path/to/file/image.png</iconQuit>
¶ Property <iconRestart>
The <iconRestart> property is used to load an image file for the menu line to restart.
<iconRestart>./path/to/file/image.png</iconRestart>
¶ Property <iconShutdown>
The <iconShutdown> property is used to load an image file for the menu line to shut down.
<iconShutdown>./path/to/file/image.png</iconShutdown>
¶ Property <iconFastShutdown>
The <iconFastShutdown> property is used to load an image file for the menu line for fast shutdown.
<iconFastShutdown>./path/to/file/image.png</iconFastShutdown>
¶ Property <iconLicense>
The <iconLicense> property is used to load an image file for the menu line for the open-source license.
<iconLicense>./path/to/file/image.png</iconLicense>
¶ Property <iconRecalboxRGBDual>
The <iconRecalboxRGBDual> property is used to load an image file for the menu line for crt.
<iconRecalboxRGBDual>./path/to/file/image.png</iconRecalboxRGBDual>
¶ Property <iconTate>
The <iconTate> property is used to load an image file for the menu line for tate parameters.
<iconTate>./path/to/file/image.png</iconTate>
¶ Property <iconArcade>
The <iconArcade> property is used to load an image file for the menu line for arcade settings.
<iconArcade>./path/to/file/image.png</iconArcade>
¶ Property <iconDownload>
The <iconDownload> property is used to load an image file for the menu line for downloading content.
<iconDownload>./path/to/file/image.png</iconDownload>
¶ Object <menuSwitch>
The <menuSwitch> objects are used to customize the on / off buttons. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>) :
menuswitch: menu on / off buttons.
<menuSwitch name=“menuswitch”>
...
</menuSwitch>
The <menuSwitch> object can contain several other properties.
¶ Property <pathOn>
The <pathOn> property is used to load an image file to replace the ON button.
<pathOn>./path/to/file/image.png</pathOn>
¶ Property <pathOff>
The <pathOff> property is used to load an image file to replace the OFF button.
<pathOff>./path/to/file/image.png</pathOff>
¶ Object <menuSlider>
The <menuSlider> objects allow you to customize the round button on a horizontal bar as in the sound options. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menuslider: round button on horizontal bar.
<menuSlider name=“menuslider”>
...
</menuSlider>
The <menuSlider> object can contain several other properties.
¶ Property <path>
The <path> property is used to load an image file to replace the button to be moved.
<path>./path/to/file/image.png</path>
¶ Object <menuButton>
The <menuButton> objects are used to customize buttons used to validate or cancel action confirmations. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>) :
menubutton: menu buttons.
<menuButton name=“menubutton”>
...
</menuButton>
The <menuButton> object can contain several other properties.
¶ Property <path>
The <path> property is used to load an image file to fill the background of unselected buttons.
<path>./path/to/file/image.png</path>
¶ Property <filledPath>
The <filledPath> property is used to load an image file to fill the background of the selected / hovered button.
<filledPath>./path/to/file/image.png</filledPath>
¶ Object <menuText>
The <menuText> objects are used to customize the basic texts in menus. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menutext: menu text.menutitle: menu title.menufooter: bar at the bottom of menus (like the current version).
<menuText name=“menutext”>
...
</menuText>
The <menuText> object can contain several other properties.
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <separatorColor>
The <separatorColor> property is used to define the color separating texts. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<separatorColor>4368ffff</separatorColor>
¶ Property <selectedColor>
The <selectedColor> property is used to define the color of highlighted text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectedColor>4368ffff</selectedColor>
¶ Property <selectorColor>
The <selectorColor> property lets you use a specific color to highlight elements of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectorColor>4368ffff</selectorColor>
¶ Object <menuTextSmall>
The <menuTextSmall> object lets you customize text sizes smaller than the basic text in menus. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate on which text element the content should act. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menutextsmall: menu text.
<menuTextSmall name=“menutextsmall”>
...
</menuTextSmall>
The <menuTextSmall> object can contain several other properties.
¶ Property <fontPath>
The <fontPath> property is used to specify a path to load the desired font from the parent object.
<fontPath>./../arts/Exo2-BoldCondensed.otf</fontPath>
¶ Property <fontSize>
The <fontSize> property is used to specify the font size to be applied to the parent object. The value is expressed as a percentage of the screen height (a value of 0.1 indicates a font size of 10% of the screen height).
<fontSize>0.025</fontSize>
¶ Property <color>
The <color> property is used to specify the color of the parent object's text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<color>666666</color>
¶ Property <selectedColor>
The <selectedColor> property is used to define the color of the highlighted text. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectedColor>4368ffff</selectedColor>
¶ Property <selectorColor>
The <selectorColor> property lets you use a specific color to highlight elements of the parent object. Colors can be in RRVVBB or RRVVBBAA format (AA for transparency, 00 = transparent and ff = opaque).
<selectorColor>4368ffff</selectorColor>
¶ Object <menuSize>
The <menuSize> object lets you customize the size of menu items. This object can have several attributes:
¶ Attribute name
- Required: yes
The name attribute is used to indicate which text element the content should act on. It can have one or more of these values at the same time.
List of values that can be used in menus (<view name=“menu”>):
menusize: size of menu items.
<menuSize name=“menusize”>
...
</menuSize>
The <menuSize> object can contain several other properties.
¶ Property <height>
The <height> property is used to apply a highlight height to elements of the parent object.
<height>0.5</height>