Let's explore the configuration file
The Theme configuration file is pretty simple to create
In your customizaton directory, creates a directory, name it theme for example.
The name has no importance.
In the theme directory, create a new xml file with the name of the theme of your choice.
For example, if you want your theme name to be "my-company", then the file is my-company.xml
Add the root element <html5>
Your document should looks like:
<?xml version="1.0" encoding="utf-8"?> <html5> </html5>
Create the first <tag> element
The <tag> represents an element that should be render on the html side. It also provided the required instructions to concatenate and compress the required filesThe tag elements contains the following possible elements:
- prefix: A prefix code to output before the element. It is used to add conditionnal css for Internet Explorer for example. See: How to add Internet Explorer conditional css
- suffix: A suffix code to output before the element. It is used to add conditionnal css for Internet Explorer for example. See: How to add Internet Explorer conditional css
- attributes: An element and a value for each attributes you want to set. See example below:
- value: The content to ouput in this element
<tag> <name>link</name> <output>yes</output> <filename>style.css</filename> <prefix></prefix> <suffix></suffix> <attributes> <rel>stylesheet</rel> <type>text/css</type> <media>screen, projection</media> </attributes> <value></value> <source> <file path="html5-foundation/css/app.css" /> <file path="html5-foundation/css/foundation.css" /> <file path="html5-foundation/css/normalize.css" /> </source> </tag>
Will result in:
<link rel="stylesheet" type="text/css" media="screen, projection" href="themes/my-company/css/style.css">
All the files app.css, foundation.css and normalize.css are concatenated and compressed in file style.min.css. The file style.css will be also present in the theme directory
- Create as many tag as you need
Register your Theme in your customization plugin