Skin development introduction - Revision history

Ronie at 20:36, 16 January 2023

2023-01-16T20:36:11Z

← Older revision		Revision as of 20:36, 16 January 2023
Line 10:		Line 10:
	<br /><br />		<br /><br />

	== Anatomy of a Skin ~~(edit test)~~==		== Anatomy of a Skin ==

	Each skin folder contains several subdirectorys, and several files:		Each skin folder contains several subdirectorys, and several files:

Ronie at 20:35, 16 January 2023

2023-01-16T20:35:56Z

← Older revision		Revision as of 20:35, 16 January 2023
Line 10:		Line 10:
	<br /><br />		<br /><br />

	== Anatomy of a Skin ==		== Anatomy of a Skin (edit test)==

	Each skin folder contains several subdirectorys, and several files:		Each skin folder contains several subdirectorys, and several files:

Uixtung: /* Fonts */

2022-08-08T06:35:44Z

Fonts

← Older revision		Revision as of 06:35, 8 August 2022
Line 80:		Line 80:
	== Fonts ==		== Fonts ==
	There's one special file called Font.xml. This file contains a list of all fonts the skin uses.		There's one special file called Font.xml. This file contains a list of all fonts the skin uses.
	~~kodi~~ will load all the fonts mentioned in this file from the /myskin/fonts directory first, and if that fails,		Kodi will load all the fonts mentioned in this file from the /myskin/fonts directory first, and if that fails,
	will attempt to load them from Kodi/media/fonts. In the event that Kodi is unable to locate the specified font, it will default to "font13". You can modify this file as you like and		will attempt to load them from Kodi/media/fonts. In the event that Kodi is unable to locate the specified font, it will default to "font13". You can modify this file as you like and add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned below.
	add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned
	below.


	== The Window XML Files ==		== The Window XML Files ==

Uixtung: /* Skin Themes */

2022-08-08T06:28:38Z

Skin Themes

← Older revision		Revision as of 06:28, 8 August 2022
Line 49:		Line 49:
	In addition to this, Kodi allows other .xbt files in the media/ folder, each one representing a different theme for your skin.		In addition to this, Kodi allows other .xbt files in the media/ folder, each one representing a different theme for your skin.
	For instance, you could tint all your main textures a red colour and create a new theme package called Red.xbt. This gives users more choice in the look of a particular skin.<br>		For instance, you could tint all your main textures a red colour and create a new theme package called Red.xbt. This gives users more choice in the look of a particular skin.<br>
	Note that only the textures change when you change themes, the layout stays the same. If the user has selected a theme, then when a control requires a texture, Kodi will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures~~. All~~ other textures will fall-back to using Textures.xbt as usual.		Note that only the textures change when you change themes, the layout stays the same. If the user has selected a theme, then when a control requires a texture, Kodi will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures, all other textures will fall-back to using Textures.xbt as usual.

	When the user selects a theme, Kodi will automatically also select the theme's default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.		When the user selects a theme, Kodi will automatically also select the theme's default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.

Uixtung: /* Skin Themes */

2022-08-08T06:26:28Z

Skin Themes

← Older revision		Revision as of 06:26, 8 August 2022
Line 47:		Line 47:
	All the basic media files for a skin should be compressed into the Textures.xbt file, and placed in the media/ folder. You can use the tool [[TexturePacker]] for this. All the images that make up the default skin theme should be in the Textures.xbt file.		All the basic media files for a skin should be compressed into the Textures.xbt file, and placed in the media/ folder. You can use the tool [[TexturePacker]] for this. All the images that make up the default skin theme should be in the Textures.xbt file.

	In addition to this, Kodi allows other .xbt files in the media/ folder, each one representing a different theme for your skin. For instance,		In addition to this, Kodi allows other .xbt files in the media/ folder, each one representing a different theme for your skin.
	you could tint all your main textures a red colour, and create a new theme package Red.xbt~~? – this~~ gives users more choice in the look		For instance, you could tint all your main textures a red colour and create a new theme package called Red.xbt. This gives users more choice in the look of a particular skin.<br>
	of a particular skin. Note that only the textures change when you change themes – the layout stays the same. If the user has selected		Note that only the textures change when you change themes, the layout stays the same. If the user has selected a theme, then when a control requires a texture, Kodi will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures. All other textures will fall-back to using Textures.xbt as usual.
	a theme, then when a control requires a texture, Kodi will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures ~~– all~~ other textures will fall-back to using Textures.xbt as usual.

	When the user selects a theme, Kodi will automatically also select the ~~themes~~ default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.		When the user selects a theme, Kodi will automatically also select the theme's default color set, based on the <themename>.xml file located in the colors/ folder. See below for more information.

	A suggested method of creating a theme is as follows:		A suggested method of creating a theme is as follows:

Uixtung at 06:13, 8 August 2022

2022-08-08T06:13:14Z

← Older revision		Revision as of 06:13, 8 August 2022
Line 6:		Line 6:
	Kodi skins once installed are located in [[userdata]] addons folder. This is the folder where all skins are placed and listed.		Kodi skins once installed are located in [[userdata]] addons folder. This is the folder where all skins are placed and listed.

	Any additional skins you create or download or install via zip Kodi will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin.myskin) is a good place to start. Don't forget to modify the addon.xml file and give your new skin a unique addon id.		Any additional skins you create or download or install via zip, Kodi will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin.myskin) is a good place to start. Don't forget to modify the addon.xml file and give your new skin a unique addon id.
	You can then edit each of the files as you become more familiar with the skinning system. Try modifying a window or two by adding a button, or altering the textures or layout and test the result of your changes in Kodi.		You can then edit each of the files as you become more familiar with the skinning system. Try modifying a window or two by adding a button, or altering the textures or layout and test the result of your changes in Kodi.
	<br /><br />		<br /><br />

Uixtung at 06:12, 8 August 2022

2022-08-08T06:12:28Z

← Older revision		Revision as of 06:12, 8 August 2022
Line 6:		Line 6:
	Kodi skins once installed are located in [[userdata]] addons folder. This is the folder where all skins are placed and listed.		Kodi skins once installed are located in [[userdata]] addons folder. This is the folder where all skins are placed and listed.

	Any additional skins you create, or download ~~from~~ or ~~be installed~~ via zip Kodi will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin.myskin) is a good place to start. Don't forget to modify the addon.xml file and give your new skin a unique addon id.		Any additional skins you create or download or install via zip Kodi will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin.myskin) is a good place to start. Don't forget to modify the addon.xml file and give your new skin a unique addon id.
	You can then edit each of the files as you become more familiar with the skinning system. Try modifying a window or two by adding a button, or altering the textures or layout and test the result of your changes in Kodi.		You can then edit each of the files as you become more familiar with the skinning system. Try modifying a window or two by adding a button, or altering the textures or layout and test the result of your changes in Kodi.
	<br /><br />		<br /><br />

Karellen at 07:13, 21 July 2020

2020-07-21T07:13:39Z

← Older revision		Revision as of 07:13, 21 July 2020
Line 16:		Line 16:
	: This contains the information that Kodi uses to find the other files that Kodi requires to describe it's skin. It also contains credits information, and versioning information.		: This contains the information that Kodi uses to find the other files that Kodi requires to describe it's skin. It also contains credits information, and versioning information.
	; myskin/1080p		; myskin/1080p
	: This is a resolution-specific directory. As Kodi can run in multiple resolutions, your skin can have multiple resolution folders. see: [[~~Skin~~.xml~~#How window xml files are found~~\|How Window XML Files Are Found]]		: This is a resolution-specific directory. As Kodi can run in multiple resolutions, your skin can have multiple resolution folders. see: [[Addon.xml\|How Window XML Files Are Found]]
	; skin.myskin/backgrounds		; skin.myskin/backgrounds
	: optional folder containing the background images used in the skin		: optional folder containing the background images used in the skin

Ronie at 23:14, 12 July 2020

2020-07-12T23:14:45Z

← Older revision		Revision as of 23:14, 12 July 2020
Line 1:		Line 1:
	{{mininav\|[[Development]]\|[[Add-on development]]\|[[~~Skin development~~]]}}		{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}

	{{Kodi}} is noted as having a very flexible and robust framework for its GUI, making theme-skinning and personal customization very accessible. Users can create their own skin (or modify an existing skin) and share it with others.		{{Kodi}} is noted as having a very flexible and robust framework for its GUI, making theme-skinning and personal customization very accessible. Users can create their own skin (or modify an existing skin) and share it with others.

Ronie at 22:54, 7 July 2020

2020-07-07T22:54:04Z

← Older revision		Revision as of 22:54, 7 July 2020
Line 85:		Line 85:
	add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned		add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned
	below.		below.

	~~=== Format of the Font.xml File ===~~
	~~The Font.xml file is divided into font sets, which includes a set of fonts used by the skin. Every~~
	~~font set must contain the same font names in order for the skin to work with all font sets.~~
	~~<syntaxhighlight lang="xml" enclose="div">~~
	~~<?xml version="1.0" encoding="UTF-8"?>~~
	~~<fonts>~~
	~~<fontset id="Default" idloc="31390">~~
	~~<font>~~
	~~....~~
	~~</font>~~
	~~<font>~~
	~~....~~
	~~</font>~~
	~~....~~
	~~</fontset>~~
	~~<fontset id="Arial" idloc="31391">~~
	~~<font>~~
	~~....~~
	~~</font>~~
	~~....~~
	~~</fontset>~~
	~~</fonts>~~
	~~</syntaxhighlight>~~
	~~A font set has the following attributes:~~

	~~; id~~
	~~: Name of the font set. Displayed to the user. Can have any value.~~
	~~; idloc~~
	~~: Refers to a string in the Skins' language file, so font names can be localized.~~

	~~It is possible to use includes (eg. <include>MonoSpace</include>) in Font.xml~~
	There has to be at least one font set with the unicode attribute set to true else languages like Chinese or Korean will not display properly. There is a font called Arialuni.TTF with a size of 20MB. It is a unicode True Type Font and works with all languages Kodi supports.


	'''Note:''' Kodi will automatically switch to the first available unicode font set if the user selects a language that needs one. This switch will not be made if the currently loaded font set already supports unicode.

	~~=== True type Fonts ===~~
	~~True type fonts must have a .ttf suffix. For a true type font it is possible to define the size (default 20)~~
	~~and a style ''normal'', ''bold'', ''italics'', or ''bolditalics''. Frodo also includes ''lowercase'' or ''uppercase''. Isengard includes ''capitalize''. Jarvis includes ''lighten''.~~

	~~Note: Multiple styles can be used by separating them with a space.~~

	~~Example:~~
	~~<syntaxhighlight lang="xml" enclose="div">~~
	~~<font>~~
	~~<name>font12</name>~~
	~~<filename>arial.ttf</name>~~
	~~<size>12</size>~~
	~~<style>uppercase lowercase capitalize bold lighten</style>~~
	~~<aspect>0.75</aspect>~~
	~~<linespacing>1.0</linespacing>~~
	~~</font>~~
	~~</syntaxhighlight>~~

	The <aspect> tag specifies the aspect ratio of the font. An aspect of 0.75 means that the width of the font will be 0.75 of the height. By default the aspect is 1.0 for all but the SD 16x9 modes (PAL16x9, NTSC16x9 and 480p16x9) where the aspect ratio is 0.75, due to the stretched pixels.

	~~The <linespacing> tag defines height of each line (sometimes called leading or inteline spacing). By default linespacing is set to 1.0.~~