Let's explore the configuration file

The Theme configuration file is pretty simple to create

In order to create a theme, you need few css files to work with

  1. In your customizaton directory, creates a directory, name it theme for example.
    The name has no importance.
  2. 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
  3. Add the root element <html5>
    Your document should looks like:
            <?xml version="1.0" encoding="utf-8"?>
            <html5>
            
            </html5>
          
  4. 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 files

    The tag elements contains the following possible elements:
    • name: the name of the element to generate, usually link for css and script for javascripts;
    • output: tells the xsl code to render the file on the content or not. Possible values are yes or no. This is used to prepare a set of file that would be called by javascript for example.
    • filename: The name of the uncompressed file, for example style.css for a css script.js for a javascript;
    • 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
    • source One element <file> per file you want to concatenate and compress. The attribute path provide the reference to the css or javascript file.

    Example:

      <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

  5. Create as many tag as you need
  6. Register your Theme in your customization plugin
    See: