Hitcher: Created page with "
The color button control is used for creating push buttons in Kodi with a box for color preview. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed. === Example === My first colorbutton control 80 60 250<..."

2025-06-15T12:44:21Z

Created page with "<section begin="main content" /> The color button control is used for creating push buttons in Kodi with a box for color preview. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed. === Example === <syntaxhighlight lang="xml" enclose="div"> <control type="colorbutton" id="2"> <description>My first colorbutton control</description> <posx>80</posx> <posy>60</posy> <width>250<..."

New page

<section begin="main content" />
The color button control is used for creating push buttons in Kodi with a box for color preview. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed.
=== Example ===
<syntaxhighlight lang="xml" enclose="div">
<control type="colorbutton" id="2">
<description>My first colorbutton control</description>
<posx>80</posx>
<posy>60</posy>
<width>250</width>
<height>200</height>
<visible>true</visible>
<colordiffuse>FFFFFFFF</colordiffuse>
<texturecolormask>mycolormask.png</texturecolormask>
<texturecolordisabledmask>mycolormask.png</texturecolordisabledmask>
<colorbox>FF0533ff</colorbox>
<onclick>ActivateWindow(MyVideos)</onclick>
<label>29</label>
<font>font12</font>
<textcolor>FFFFFFFF</textcolor>
<focusedcolor>FFFFFFFF</focusedcolor>
<disabledcolor>80FFFFFF</disabledcolor>
<align>left</align>
<aligny>center</aligny>
<pulseonselect>false</pulseonselect>
<onfocus>-</onfocus>
<onunfocus>-</onunfocus>
<onup>2</onup>
<ondown>3</ondown>
<onleft>1</onleft>
<onright>1</onright>
</control>
</syntaxhighlight>
=== Available tags ===
In addition to the [[Default_control_tags]] the following tags are available. Note that each tag is '''lower case''' only. This is important, as xml tags are case-sensitive.
{| class="prettytable"
! Tag !! Description
|-
| '''texturefocus'''
| Specifies the image file which should be displayed when the button has focus. [[Texture Attributes|See here for additional information about textures.]]
|-
| '''texturenofocus'''
| Specifies the image file which should be displayed when the button does not have focus.
|-
| '''label'''
| The label used on the button. It can be a link into strings.po, or an actual text label.
|-
| '''font'''
| Font used for the button label. From fonts.xml.
|-
| '''textcolor'''
| Color used for displaying the button label. In AARRGGBB hex format, or a name from the [[Colour themes|colour theme.]]
|-
| '''focusedcolor'''
| Color used for the button label when the button has in focus. In AARRGGBB hex format or a name from the [[Colour themes|colour theme.]]
|-
| '''disabledcolor'''
| Color used for the button label if the button is disabled. In AARRGGBB hex format or a name from the [[Colour themes|colour theme.]]
|-
| '''invalidcolor'''
| Color used for the button if the user entered some invalid value. In AARRGGBB hex format or a name from the [[Colour themes|colour theme.]]
|-
| '''shadowcolor'''
| Specifies the color of the drop shadow on the text, in AARRGGBB format, or a name from the [[Colour themes|colour theme.]]
|-
| '''angle'''
| The angle the text should be rendered at, in degrees. A value of 0 is horizontal.
|-
| '''align'''
| Label horizontal alignment on the button. Defaults to left, can also be center or right.
|-
| '''aligny'''
| Label vertical alignment on the button. Defaults to top, can also be center.
|-
| '''textoffsetx'''
| Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
|-
| '''textoffsety'''
| Amount to offset the label from the top edge of the button when using top alignment.
|-
| '''textwidth'''
| Will truncate any text that's too long.
|-
| '''onclick'''
| Specifies the action to perform when the button is pressed. Should be a built in function. [[Built-in_scripting|See here for more information.]] You may have more than one <onclick> tag, and they'll be executed in sequence.
|-
| '''onfocus'''
| Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. [[Built-in_scripting|See here for more information.]]
|-
| '''onunfocus'''
| Specifies the action to perform when the button loses focus. Should be a built in function.
|-
| '''wrapmultiline'''
| Will wrap the label across multiple lines if the label exceeds the control width.
|-
| '''colorbox'''
| Specifies the color of the preview color box, in AARRGGBB format, or a name from the [[Colour themes|colour theme.]]
|-
| '''colorposx'''
| X offset of the preview color box.
|-
| '''colorposy'''
| Y offset of the preview color box.
|-
| '''colorwidth'''
| Width in Pixels of the preview color box.
|-
| '''colorheight'''
| Height in Pixels of the preview color box.
|-
| '''texturecolormask'''
| Specifies the image mask which should be displayed to see the color preview. [[Texture Attributes|See here for additional information about textures.]]
|-
| '''texturecolordisabledmask'''
| Specifies the image mask which should be displayed when the control is disabled. [[Texture Attributes|See here for additional information about textures.]]
|}

<section end="main content" />

== See also ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]

[[Category:Skin development]]

Color Button Control - Revision history