HOW-TO:Simple Modifications - Revision history

Karellen at 07:36, 21 July 2020

2020-07-21T07:36:47Z

← Older revision		Revision as of 07:36, 21 July 2020
Line 1:		Line 1:
	{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}		{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}

	This tutorial will show you how to change the main menu on the ~~[[General Navigation#~~Home Screen~~\|Home Screen]]~~ of the Confluence skin.		This tutorial will show you how to change the main menu on the Home Screen of the Confluence skin.
	This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].		This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].

Line 81:		Line 81:
	Kodi has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.		Kodi has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.

	This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[~~General Navigation~~#~~Home Screen~~\|Home Screen]] of the Confluence skin.		This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[Basic_controls#Home_Screen\|Home Screen]] of the Confluence skin.

	We start by opening up [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml], which is the XML file for the Home window for all resolutions. [[Window IDs\|You can find a list of the windows and their XML files here.]]<br />		We start by opening up [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml], which is the XML file for the Home window for all resolutions. [[Window IDs\|You can find a list of the windows and their XML files here.]]<br />
Line 124:		Line 124:
	</source>		</source>

	Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[~~Label Control~~\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.		Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label_control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.

	== More simple mods ==		== More simple mods ==

Ronie at 23:44, 14 July 2020

2020-07-14T23:44:40Z

← Older revision		Revision as of 23:44, 14 July 2020
Line 125:		Line 125:

	Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.		Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.

			== More simple mods ==
			*[[HOW-TO:Add Time Remaining to Confluence]]
			*[[HOW-TO:Add volume value in Confluence]]
			*[[HOW-TO:Change time and date in Confluence]]
			*[[HOW-TO:Change the episode thumbnail in Confluence]]
			*[[HOW-TO:Remove media flags in Confluence]]
			*[[HOW-TO:Remove ratings in Confluence]]
			*[[HOW-TO:Remove the logo in Confluence]]
			*[[HOW-TO:Simplify the seekbar in Confluence]]

Ronie: /* How to Change the Function of an Option */

2020-07-13T00:26:23Z

How to Change the Function of an Option

← Older revision		Revision as of 00:26, 13 July 2020
Line 32:		Line 32:
	As you may have found out by now, Kodi will show the buttons (left to right) in the order they are listed in the xml file.		As you may have found out by now, Kodi will show the buttons (left to right) in the order they are listed in the xml file.

	== How to Change the Function of an ~~Option~~ ==		== How to Change the Function of an item ==
	The homepage of Kodi features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.		The homepage of Kodi features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.

Ronie at 00:25, 13 July 2020

2020-07-13T00:25:59Z

← Older revision		Revision as of 00:25, 13 July 2020
Line 3:		Line 3:
	This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.		This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.
	This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].		This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml].
	~~;You can find a list of the windows and their xml files here:~~
	* [[Window IDs]]<br />

	== How to Reorder the Main Menu ==		== How to Reorder the Main Menu ==

Ronie at 00:25, 13 July 2020

2020-07-13T00:25:06Z

← Older revision		Revision as of 00:25, 13 July 2020
Line 31:		Line 31:
	Now the weather button will show up next to, on the right of, the music button on the Home menu.		Now the weather button will show up next to, on the right of, the music button on the Home menu.

	As you may have found out by now, ~~XBMC~~ will show the buttons (left to right) in the order they are listed in the xml file.		As you may have found out by now, Kodi will show the buttons (left to right) in the order they are listed in the xml file.

	== How to Change the Function of an Option ==		== How to Change the Function of an Option ==
	The homepage of ~~XBMC~~ features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.		The homepage of Kodi features the main sections (Programs, Pictures, Videos, Music, Weather, Settings) as separate buttons. This tutorial shows you how to change one of these buttons so that it directly open a certain section of the library.

	The action of a button is defined by it's <onclick> function.		The action of a button is defined by it's <onclick> function.
Line 48:		Line 48:
	== How to add a new button to the Menu ==		== How to add a new button to the Menu ==
	Let's say you want a button on the menu linking to your kids movies.		Let's say you want a button on the menu linking to your kids movies.
	the fist thing you need to do as add the folder ~~containg~~ the kids movies as a source in ~~XBMC~~.		the fist thing you need to do as add the folder containing the kids movies as a source in Kodi.
	This can be done by going to Videos > Files > Add videos		This can be done by going to Videos > Files > Add videos

Line 58:		Line 58:
	<source>		<source>
	<name>Kids</name>		<name>Kids</name>
	<path pathversion="1">smb://~~XBMC~~/Movies/Kids-Movies/</path>		<path pathversion="1">smb://Kodi/Movies/Kids-Movies/</path>
	</source>		</source>
	</video>		</video>
Line 80:		Line 80:
	== How to add weather labels to a window ==		== How to add weather labels to a window ==

	~~XBMC~~ has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.		Kodi has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.

	This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.		This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.
Line 125:		Line 125:
	</source>		</source>

	Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. ~~XBMC~~ fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.		Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. Kodi fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.

Ronie: /* References */

2020-07-13T00:23:27Z

References

← Older revision		Revision as of 00:23, 13 July 2020
Line 126:		Line 126:

	Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. XBMC fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.		Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. XBMC fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.


	~~== References ==~~
	~~[[Window Structure\|More information on the structure of skin xml files can be found here]]~~

	~~[[Window IDs\|More information on the different skin files, window names, and id's can be found here]]~~

	~~[[Button control\|Information on Button controls]]~~

	~~[[MultiImage Control\|Information on MultiImage controls]]~~

Ronie at 00:22, 13 July 2020

2020-07-13T00:22:48Z

← Older revision		Revision as of 00:22, 13 July 2020
Line 78:		Line 78:
	Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.		Now we have our code ready, we can simple insert it wherever we want in between the other menu buttons.

			== How to add weather labels to a window ==

			XBMC has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.

			This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.

			We start by opening up [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml], which is the XML file for the Home window for all resolutions. [[Window IDs\|You can find a list of the windows and their XML files here.]]<br />

			We find the <controls> section in the XML file, and insert the following XML code after the rest of the <control> blocks. This effectively places it on top of everything else, as controls are rendered in the order that they appear in the XML file.

			<source lang="xml">
			<control type="image">
			<description>Weather conditions</description>
			<left>1200</left>
			<top>600</top>
			<width>48</width>
			<height>48</height>
			<texture>$INFO[Weather.Conditions]</texture>
			<colordiffuse>98FFFFFFF</colordiffuse>
			<visible effect="fade" time="250">Weather.IsFetched</visible>
			</control>

			<control type="label">
			<description>Weather Temperature</description>
			<left>1000</left>
			<top>600</top>
			<width>200</width>
			<height>20</height>
			<label>$INFO[Weather.Temperature]</label>
			<font>font13</font>
			<align>left</align>
			<visible effect="fade" time="250">Weather.IsFetched</visible>
			</control>

			<control type="label">
			<description>Weather Location</description>
			<left>1000</left>
			<top>620</top>
			<width>200</width>
			<height>20</height>
			<label>$INFO[Weather.Location]</label>
			<font>font13</font>
			<align>left</align>
			<visible effect="fade" time="250">Weather.IsFetched</visible>
			</control>
			</source>

			Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. XBMC fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.

Ronie: Ronie moved page HOW-TO:Edit the home screen skin files to HOW-TO:Simple Modifications without leaving a redirect

2020-07-13T00:19:59Z

Ronie moved page HOW-TO:Edit the home screen skin files to HOW-TO:Simple Modifications without leaving a redirect

← Older revision	Revision as of 00:19, 13 July 2020
(No difference)

Ronie at 23:39, 12 July 2020

2020-07-12T23:39:15Z

← Older revision		Revision as of 23:39, 12 July 2020
Line 91:		Line 91:

	==See also==		==See also==
	* [[How to show the weather on the home page]]
	~~'''Development:'''~~
	* [[Add-on development]]		* [[Add-on development]]
	* [[Skinning]]		* [[Skinning]]

Ronie at 23:26, 12 July 2020

2020-07-12T23:26:04Z

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

	This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.		This tutorial will show you how to change the main menu on the [[General Navigation#Home Screen\|Home Screen]] of the Confluence skin.

← Older revision		Revision as of 00:23, 13 July 2020
Line 126:		Line 126:

	Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. XBMC fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.		Note that the above code is making use of $INFO[] label in the [[Image Control\|image control]] and in the [[Label Control\|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels\|can be found here]]. XBMC fills in the information at runtime for both the labels and the images. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.


	~~== References ==~~
	~~[[Window Structure\|More information on the structure of skin xml files can be found here]]~~

	~~[[Window IDs\|More information on the different skin files, window names, and id's can be found here]]~~

	~~[[Button control\|Information on Button controls]]~~

	~~[[MultiImage Control\|Information on MultiImage controls]]~~