Difference between revisions of "How to create a theme"

From OsirisWiki
Jump to: navigation, search
(Created page with '== 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 ...')
 
Line 8: Line 8:
  
 
Each state contains a definition for a BoxTile image of the Background, ProgressBar, Overlay, HoverOverlay, and PressedOverlay.
 
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 ==

Revision as of 07:36, 21 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 top, right, bottom, left.
  • 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.