Almost all positions, dimensions, origins, etc. work in percentages - that is, they are a decimal between 0 and 1, representing the percentage of the screen on that axis to use. This ensures that themes look similar at every resolution.
Colors are hex values, either 6 or 8 characters, defined as RRGGBB or RRGGBBAA. If alpha is not included, a default value of FF will be assumed (not transparent).
Themes can be defined with two tags: `<theme>` and `<themeBasic>`.
You can define both a normal and basic theme in the same file.
If EmulationStation is running in "basic" mode, it will try to use `<themeBasic>`. If that doesn't exist or ES is running in "detailed" mode (a gamelist.xml is present), `<theme>` will be used.
A theme is made up of components, which have various types. At the moment, the only type is `image`. Components are rendered in the order they are defined - that means you'll want to define the background first, a header image second, etc.
Display tags define some "meta" display attributes about your theme. Display tags must be at the root of the `<theme>` tree - for example, they can't be inside a component tag. They are not required.
`<listLeftAlign />` - if present, the games list names will be left aligned to the value of `<listOffsetX>` + `<listTextOffsetX>`. On by default for detailed themes.
`<hideHeader />` - if present, the system name header won't be displayed (useful for replacing it with an image). If you're making a complete custom theme, you probably want to use this.
`<gameImageDim>` - two values for the dimensions of the game art, in the form of `[width] [height]`, as a percentage of the screen. Default is `$infoWidth 0` (width fits within the info column). The image will only be resized if at least one axis is nonzero *and* exceeded by the image's size. You should always leave at least one axis as zero to preserve the aspect ratio.
`<gameImageOrigin>` - two values for the origin of the game art, in the form of `[x] [y]`, as a percentage. Default is `0.5 0` (top-center of the image).
`<gameImageNotFound>` - path to the image to display if a game's image is missing. '.' and '~' are expanded.
**WARNING:** the "box*" tags *WILL BE REMOVED* in future versions of EmulationStation. They have been replaced by a "nine patch" image that provides the (almost) the same functionality with less hassle.
`<boxBackground>` - path to a background image file. ~ and . are expanded.
`<boxBackgroundTiled />` - if present, the background will be tiled instead of stretched.
`<boxHorizontal>` - path to the "left" border image file. It will be flipped for the right border. ~ and . are expanded.
`<boxHorizontalTiled />` - if present, the horizontal image will be tiled instead of stretched downwards.
`<boxVertical>` - path to the "top" border image file. It will be flipped for the bottom border. ~ and . are expanded.
`<boxVerticalTiled />` - if present, the vertical image will be tiled instead of stretched to the right.
`<boxCorner>` - path to the "top left corner" image file. It will be flipped for the top right, bottom right, and bottom left corners. ~ and . are expanded.
You can leave off any tags you don't want to use, and they'll use the default. Size is defined as a percentage of the screen height. "." and "~" are expanded for paths.
Themes can also define menu sounds. These tags go in the root of the `<theme>` tree, just like Display tags. Sounds should be in the .wav format. The relative path operator (.) and home operator (~) are properly expanded.
Variables can be used in position and dimension definitions. They can be added, subtracted, multiplied, and divided. Parenthesis are valid. They are a percentage of the screen.
