HOW TO create themes.

ATK uses a simple template system. It is based on the assumption that
the layout of an application consists of a set of boxes. 
In a theme the layout of a box is specified, along with things like
fonts, colors etc.

Each theme has its own directory in the themes/ or atk/themes/ directory.
The directory name is the name of the theme. Example: atk/themes/ananda/

The theme directory contains 3 or 4 elements:

Filename                    Description
-------------------------------------------------------
layout.inc                  Layoutfile
block_top.tmpl              Block Top
block_bottom.tmpl           Block Bottom
images/ (optional)          Images used in the template

ATK itself has the following default themes:

- ananda
- blackbox
- blurb
- default
- kuro5chin
- moronic
- newsforge
- papered
- slash

If you want to create your own theme, you have to create it in 
your application /themes directory. DON'T change the ATK themes.
ATK will first look in the local themes/ directory, if it can't find the 
theme there, it will continue its search in the atk/themes/ directory.
This way, it's possible to override the default themes for an application.

Tip: The easiest way to create a theme is to copy one of the existing themes
and use that as a starting point.
Example:
cd <dirofyourapplication>
cp -r atk/themes/ananda themes/mytheme


The rest of this file gives an explanation and examples of the files that 
make up a theme.


layout.inc (themes/<theme>)
=================================

This is the config file of the layout.

example of a layout file with comments:

<?php
  
  // Default information
  $g_theme["Author"] = "Sandy Pleyte";               // Author name
  $g_theme["Author_email"] = "sandy@ibuildings.nl";  // Author e-mail
  $g_theme["Description"] = "Default";               // Theme description
  $g_theme["Version"] = "1.0";                       // version number
  
  // some picture urls
  $g_theme["BgURL"] = "";                            // Background url
  $g_theme["LogoURLl"] = "";                         // Logo url
  
  // Font settings
  $g_theme["FontFamily"] = "Verdana, Helvetica, Arial"; // Font
  $g_theme["FontSize"] = "8";                           // Font size in pt.
  $g_theme["FontWeight"] = "none"; 
  
  // Font settings for a block
  $g_theme["BlockFontFamily"] = "Verdana, Arial"; // Font
  $g_theme["BlockFontSize"] = "12";               // Font size in pt.
  $g_theme["BlockFontWeight"] = "none";           // FontWeight (bold) 
  
  // Body settings
  $g_theme["BgColor"] = "#eeeeee"; // Background color
  $g_theme["FgColor"] = "#000000"; // text color
  
  // Link settings
  $g_theme["LinkColor"] = "#00839e";    // link color
  $g_theme["HoverColor"] = "#00839e";   // Hover color (IE4+ Only)
  $g_theme["VisitedColor"] = "#000000"; // Visited color
  $g_theme["ActiveColor"] = "#000000";  // Active color (IE4+ Only)

  // Table header settings
  $g_theme["TableHeaderFontFamily"] = "Verdana, Arial"; // Font
  $g_theme["TableHeaderFontSize"] = "15";               // Font size in pt.
  $g_theme["TableHeaderFontWeight"] = "Bold";           // FontWeight (bold) 
  $g_theme["TableHeaderBgColor"] = "#cccccc";           // Table bgcolor;
  $g_theme["TableHeaderFgColor"] = "#000000";           // Table font color;
 
  // Table settings
  $g_theme["TableFontFamily"] = "Verdana, Arial"; // Font
  $g_theme["TableFontSize"] = "12";               // Font size in pt.
  $g_theme["TableFontWeight"] = "none";           // FontWeight (bold) 
  $g_theme["TableFgColor"] = "#000000";           // Table font color;

?>


block_top.tmpl (themes/<theme>)
===============================

This is the top of the box, you can use the following vars in the template:

[HEADER]   - Title of the window
[ALIGN]    - Alignment (See xlay -> BlocksAlign)
[IMAGE]    - Image Directory

Example of block_top.tmpl

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" width="100%">
  <tr>
    <td width="100%">
      <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#708090">
        <tr>
          <td bgcolor="#00839e" valign="top" align="center" width="100%">
            <font size=1 color="#ffffff"><b>[HEADER]</b></font>
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffffff" align="left">


block_bottom.tmpl
=================

This is the bottom of the box, you can use the following vars in the template:

[IMAGEDIR] - Image Directory

Example of block_bottom.tmpl

          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<br>

images/
=======

