Making your first theme

The way to go — with the studio, or by hand.

The result is the same: a theme folder. Two ways to get there.

With the studio

1. Start from a template. A blank page is the worst starting point. A template comes with its components already in place: you replace them.
2. Choose your screen resolutions — HD 16:9, CRT 4:3, vertical screen (TATE). What fits on a wide screen does not fit on a CRT television. Start with one, add the others later.
3. Place your components: drag them from the left column, adjust them in the right one.
4. Switch systems in View options and look: the most common mistake is a theme tuned on a single machine that breaks everywhere else. Logos do not all have the same shape, names do not all have the same length.
5. Export, copy the folder to your machine, try it — see Trying your theme.

By hand

1. Start from an existing theme. Open one, read it: it is the fastest way to understand how things are done. The official Recalbox theme is a good start.
2. Create the folder and its theme.xml — the only mandatory file. See Folders and files.
3. Announce what you target in the <theme> tag: compatibility for the screen types, resolutions for the resolutions. These two attributes light up the pictograms of the theme manager, and announcing them wrong is promising what the theme does not deliver. See The header.
4. Write your views, one per screen, and split into several files as soon as it grows — see The minimal working theme, then Splitting your theme.
5. Serve the other screens with conditions rather than copying everything: <include if="crt">.
6. Copy the folder to your machine and try it — and read themes.log at the first invisible component.

In both cases, the same mistake lies in wait: only checking on YOUR screen and YOUR system.