Difference between revisions of "How to create a theme"

Revision as of 22:29, 24 April 2009

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

<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>

States

The <States></States> section contains definitions for 5 states:

1. Default
2. Discharging
3. LowBattery
4. CriticalBattery
5. Charging

The Default section would be defined as:

<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>

• Font (optional): Specifies the font name, size, and style. If not specified, the user's default font (see Preferences) is used.
• TextColor: The color of the text shown. Is is defined as A,R,G,B or R,G,B.
• TextShadow: If True, a shadow is drawn underneath the text
• Padding: 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 left, top, right, bottom.
• Background, ProgressBar, Overlay, HoverOverlay, PressedOverlay: 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.

Overlay: Normal state

HoverOverlay: When the mouse is hovering over the bar

PressedOverlay: 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

<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>

• CornerTopLeft through Center: 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 Center image).

• Margin: Defines the number of pixels from the edge of the drawing surface where the BoxTile is to be drawn. Defined either as a single value (applies to all four edges) or as left, top, right, bottom.