View source for How to create a theme

== Structure of a theme ==
A theme consists of two parts, 1) an XML definition file, and 2) image files

== Theme XML Definition File ==
The theme definition file, usually named theme.xml, defines how the theme will look and what images files will be used.

The theme definition contains 5 states, Default, Discharging, LowBattery, CriticalBattery, and Charging.

Each state contains a definition for a BoxTile image of the Background, ProgressBar, Overlay, HoverOverlay, and PressedOverlay.

=== XML Outline ===
<source lang="xml">
<Theme>
	<Author>Author Name</Author>
	<Date>1/22/2009</Date>
	<Description>Theme description (not currently used)</Description>
	<Name>ThemeName (shown in the Themes list)</Name>
	<Version>1.0</Version>
	<States>
	</States>
</Theme>
</source>

=== States ===
The <States></States> section contains definitions for 5 states:
# Default
# Discharging
# LowBattery
# CriticalBattery
# Charging

The Default section would be defined as:
<source lang="xml">
<Default>
	<Font>
		<Name>Segoe UI</Name>
		<Size>11</Size>
		<Style>Regular</Style>
	</Font>
	<TextColor>200, 255, 255, 255</TextColor>
	<TextShadow>True</TextShadow>
	<Padding>1</Padding>
	<Background>
	</Background>
	<ProgressBar>
	</ProgressBar>
	<Overlay>
	</Overlay>
	<HoverOverlay>
	</HoverOverlay>
	<PressedOverlay>
	</PressedOverlay>
</Default>
</source>

* <code>Font</code> ''(optional)'': Specifies the font name, size, and style.  If not specified, the user's default font ''(see [[Preferences#BatteryBar_font|Preferences]])'' is used.
* <code>TextColor</code>: The color of the text shown.  Is is defined as A,R,G,B or R,G,B.
* <code>TextShadow</code>: If <code>True</code>, a shadow is drawn underneath the text
* <code>Padding</code>: Specifies how far from the edge of the drawing area the text should be centered. Defined either as a single value (applies to all four edges) or as <code>top, right, bottom, left</code>.
* <code>Background, ProgressBar, Overlay, HoverOverlay, PressedOverlay</code>: BoxTile definitions used to draw the final ''State'' image.  Each of the sections is optional.
: The state is drawn by first drawing the Background, then the ProgressBar, then the appropriate Overlay.
: <code>Overlay</code>: Normal state
: <code>HoverOverlay</code>: When the mouse is hovering over the bar
: <code>PressedOverlay</code>: When the mouse button is pressed on the bar

== Images ==
Images in a BatteryBar theme are defined as BoxTiles.

A BoxTile image is made up of 9 separate images, 4 borders (top, left, bottom, right), 4 corners (top-left, top-right, bottom-left, bottom-right) and 1 center image.

The easiest way to create a BoxTile image is to first create a full-size version of the image and then slice the image into the 9 corresponding parts.

The 4 corner images are drawn exactly as-is. The 4 border images are tiled.  The top and bottom images are titled horizontally and the left and right images are tiled vertically.  The center image is stretched vertically and tiled horizontally.

=== BoxTile XML ===
Below is a sample XML for the Background BoxTile
<source lang="xml">
<Background>
	<CornerTopLeft>Background\topleft.png</CornerTopLeft>
	<CornerTopRight>Background\topright.png</CornerTopRight>
	<CornerBottomLeft>Background\bottomleft.png</CornerBottomLeft>
	<CornerBottomRight>Background\bottomright.png</CornerBottomRight>
	<LeftBorder>Background\left.png</LeftBorder>
	<RightBorder>Background\right.png</RightBorder>
	<TopBorder>Background\top.png</TopBorder>
	<BottomBorder>Background\bottom.png</BottomBorder>
	<Center>Background\center.png</Center>
	<Margin>0,3,0,3</Margin>
</Background>
</source>

Each of the XML statements defines a path, relative to the XML file, where the image is location.  Each image is optional.  Only images that are specified will be drawn (for example, some BoxTiles only specify the <code>Center</code> image).

<code>Margin:</code> Defines the number of pixels from the edge of the drawing surface where the BoxTile is to be drawn.