Theme.xml

At the heart of every single Easy Eatery theme you will find theme.xml.

This file contains all of configuration options for the theme, plus information about the author:

An example of a typical theme.xml structure:

<?xml version="1.0"?>
<theme>
  <name>Lux</name>
  <description>An Easy Eatery theme.</description>
  <author>Easy Eatery</author>
  <author_url>https://easyeatery.co.uk</author_url>
  <config>
    <fonts>
      <!-- FONT STYLES -->
    </fonts>
    <colors>
      <!-- COLOUR GROUPS / SWATCHES -->
    </colors>
    <options>
     <!-- OPTIONS -->
    </options>
    <images>
     <!-- IMAGE SIZES -->
    </images>
  </config>
</theme>

Essential fields

Theme.xml files will, at the very least contain the following fields:

Field	Description
name	The name of the theme
description	A description for the theme, used within the theme & design section of the Easy Eatery control panel.
author	The name of the author of the current theme.
author_url	The official website of the theme's author.

Customisation options:

Theme.xml is also where theme customisation options are defined. These are options which are used by the theme customiser, to provide the site owner the means to make 'zero code' customisations to their website.

As a theme author you can create the following type of customisation options:

Font styles

Font styles typically correlate to standard typography elements such as headings, blockquotes, longform such as paragraphs and lists, but there are no limits to the number of font styles that you can create.

Font styles need to be appended to the <fonts></fonts> section of theme.xml.

An example font style:

<style>
  <name>Heading 2</name>
  <var>h2</var>
  <font>el_messiri</font>
  <height>110</height>
  <!-- USE EITHER -->
  <scale>100</scale>
  <!-- OR -->
  <size>32</size>
  <!-- BUT NOT BOTH -->
  <spacing>0</spacing>
  <style>normal</style>
  <weight>400</weight>
  <transform>none</transform>
</style>

Field	Description
name	The field name is used within the theme customiser as a label for the group of fields that are associated with this font style.
var	The var is the prefix to the css variables that will be created for this font style. Add only the name, dashes or underscores. There's no need to add the double-dash prefix to the variable name as this will be added for you.
font	The name of the font to be used in this font style. For a current list of supported Easy Eatery hosted fonts, please see our font quick reference guide.
height	Defines the line-height CSS property for the font style. The unit for this field is percent (of the font size). The default option is '100'.
scale	Unlike size, this field returns a multiplier value which can used in responsive font size calculations. The default value is '100'.
size	Defines the font-size CSS property for the font style. This field returns a numeric value, between 10px and 120px.
spacing	Defines the letter-spacing CSS property for this font style. The unit for this field is px. The default option is '0'.
style	Defines the font-style CSS property for this font style. This would typically be 'normal' or 'italic'. The default option is 'normal'.
transform	Defines the text-transform CSS property for this font style. Possible options for this style are 'none', 'capitalize', 'uppercase' and 'lowercase'. The default option is 'none'.
weight	Defines the font-weight CSS property for this font style. Possible values are defined by the selected font, but are always numeric; 400,600, etc. The default option is '400'.

The above example, provided the scale attribute was set, would generate the following CSS variables:

<style>
  :root {
	--h2-font: el_messiri;
	--h2-line-height: 110%;
	--h2-letter-spacing: 0px;
	--h2-style: normal;
	--h2-weight: 400;
	--h2-text-transform: none;
	--h2-scale: 1;
  }
</style>

These variables can then be used in your theme's CSS, for example:

<style>

  h2 {
	color: var(--h2);
	font-family: var(--h2-font);
	font-style: var(--h2-style);
	font-weight: var(--h2-weight);
	line-height: var(--h2-line-height);
	letter-spacing: var(--h2-letter-spacing);
	text-transform: var(--h2-text-transform);
	margin: 0;
  }

  @media (max-width: 479px)  { h2 { font-size: calc( 2.25rem * var(--h2-scale)); }}
  @media (min-width: 480px)  { h2 { font-size: calc( ( 2.25rem + ((1vw - 0.3rem) * 0.9836)) * var(--h2-scale)); }}
  @media (min-width: 1701px) { h2 { font-size: calc( 3rem * var(--h2-scale)); }}

</style>

Note in the above example, the usage of the --h2-scale variable.

You can see how this variable acts as a multiplier in the CSS calc() function. This implementation would allow the site owner to modify the size of the Heading 2, whilst retaining the responsive text sizing defined by the theme's author.

In this example, the font size would scale between 2.25rem and 3rem, between viewport widths of 480px and 1700px. If the multiplier were set to 150% in the theme customiser, the font sizes used would be 3.375rem and 4.5rem.

If you want to use responsive font sizing in your theme, use this handy responsive CSS generator.

Don't use both 'size' and 'scale' fields in a font style

There's no need to specify both a size field and a scale field when creating a font style; only one of the two will ever be used at any one time. Use size if you want to let the site owner set the exact font size, or use scale, if you want to let the site owner to set the font size relative to your designed size, or if font size CSS is responsive.

Colour swatches

Colour swatches section of theme.xml allows you you define colour fields. These fields allow site owners to override the default colours for the theme using the theme customiser tool.

Colour swatches need to be appended to the <colors></colors> section of theme.xml, however, unlike font styles, colour swatches must be added into groups using the markup <group></group>.

There are no limits to the number of colour fields or groups you can create, although we'd recommend that you put a reasonable limit in place in order to prevent themes being difficult to customise.

An example of a colour group, with two colour swatches added:

<group>
  <name>Text colours</name>
  <!-- COLOUR -->
  <color>
	<name>Text</name>
	<var>text</var>
	<hex>#000</hex>
  </color>
  <!-- COLOUR -->
  <color>
	<name>Text on background</name>
	<var>text-on-bg</var>
	<hex>#FFF</hex>
  </color>
</group>

As you can see within the example above, each colour group must have a name, and at least one colour swatch. Each swatch needs the following fields:

Field	Description
name	Used purely as a label to the colour picker field in the theme customiser.
var	Forms the CSS variable that will be generated for the colour swatch on the frontend of the website. No need to add the double-dash prefix, just the name of the variable is enough; e.g. 'background' would be output as --background: {value} in the CSS;
hex	The default colour for this particular swatch.

Still can't find what you're looking for?

Contact support