You are here: Home > Documentation > tutorial > Customizing the Web Lite Look and Feel > Creating a theme for Xataface

Previous: Extending Templates	Up to Contents

Customizing the Web Lite Look and Feel

Jump:

The Xataface includes some powerful templating tools that give the developer the power to modify any part of the interface easily.

Creating a theme for Xataface

Xataface 0.7 allows you to easily develop, distribute, share, and install your your own themes

As we have seen from the earlier sections of this tutorial, Xataface's look and feel is extremely flexible and customizable. Here we will explore ways to reuse your customizations and distribute them in a a theme.

What is a theme?

Wikipedia explains this nicely:

In computing, a theme is a preset package containing graphical appearance details, used to customise the look and feel of (typically) an operating system, widget set or window manager.
Graphics themes for individual applications are often referred to as skins, and the words may be equivalent.
Themes are often used to change the appearance of a wide range of things at once, which makes them much less granular than allowing the user to set each option individually. For example, you might want the window-borders from a particular theme, but installing it would also alter your desktop background.
One method for dealing with this is to allow the user to select which parts of the theme they want to load, for example in Windows 98, you could load the background and screensaver from a theme, but leave your icons and sounds untouched.

In Xataface, a theme is essentially a set of templates, stylesheets, and images that alter the way a Xataface application looks.

Making your own theme

All themes share a common basic directory structure. For example, it we wanted to make a theme named mytheme, would create a directory as follows:

mytheme/
    templates/

Your theme directory has a single sub-directory named templates where all of the templates used by your theme are stored. You can override any template in the Dataface/templates directory by simply placing a template of the same name in your theme's templates directory. Most themes will start off by overriding the Dataface_Main_Template.html template since it is used for every page in a Xataface application. A good way to start would be to copy the Dataface/templates/Dataface_Main_Template.html template into the mytheme/templates directory, then start making modifications.

There are certain slots and blocks (the {define_slot} and {block} tags) that you will want to maintain in order for your application to work properly, but you are essentially free to change the template at will.

Your theme directory structure will look like:

mytheme/
        templates/
                Dataface_Main_Template.html

Installing Your Theme

Installing your theme into one of your applications is easy.

Inside your application's directory, create a directory named themes.
Copy your mytheme directory into the themes directory that you just created.
Inside the application's conf.ini file, add a [_themes] section if it isn't already there.
Add the following to the [_themes] section of your conf.ini file:
```
[_themes]
mytheme=themes/mytheme
```

Now if you start up your application, you'll see that it is using your custom theme.

Uninstalling Your Theme

Uninstalling your theme is as easy as commenting out the portion of the conf.ini file where you added your theme:

[_themes]
;mytheme=themes/mytheme

Adding Your Own Stylesheet

Create a stylesheet and place it inside your mytheme directory. You can call this file anything you want, but let's call ours styles.css.
In the <head> section of your theme's Dataface_Main_Template.html template, include your stylesheet as follows:
```
<link href="{$ENV.DATAFACE_SITE_URL}/themes/mytheme/styles.css" rel="stylesheet" type="text/css"/>
```

Adding Images and Other Resources

Most themes will include some images, icons, or perhaps sounds and movies. To include these in your theme you can place them anywhere in your mytheme directory, so that they can be easily distributed with your theme. Since your theme will always be located inside the themes directory for any application, the resources can easily be referenced from the theme's templates using the {$ENV.DATAFACE_SITE_URL} variable - which will always point to the application's directory.

e.g.

If we create an images directory in our mytheme directory, and we could refer to images in this directory from a template using:

<img src="{$ENV.DATAFACE_SITE_URL}/themes/mytheme/images/img1.jpg}"/>

etc..

Previous: Extending Templates	Up to Contents

Pages