print page  |  view normal version 

Section 5.1 - Introduction to Enano's theming system

You have likely noticed that Enano-based sites can have many different looks. Enano is fully theme-able, and comes with several rather nice themes pre-loaded. Obviously, if you want your site to be truly unique, you should create your own theme or hire someone to design a custom theme for your site.

Vocabulary

Here are several terms we'll be using throughout this chapter.

  • Theme: A collection of templates, stylesheets, images, and scripts that combine to make a unified look-and-feel for your Enano site
  • Template: A single file, usually in HTML, but with specially formed HTML comments that can insert variables or only print certain content if a condition is true
  • Style: A CSS stylesheet in the theme's css/ directory. Each stylesheet will be represented as one "style" for your theme. A style typically means an alternative color theme or one or more elements in a separate location.

Basic concepts

Each Enano theme will have its own subfolder in the themes/ directory of your Enano installation. There are four themes included with Enano: oxygen, stpatty, printable, and admin. Enano 1.1 also introduces a new theme, Enanium. The first two and Enanium are user themes - they can be used as general themes shown for most pages. Admin and printable are system themes. They are used only internally by Enano. Admin is used by the administration panel, and printable is used to format pages so that they are acceptable for printing. In some cases, Oxygen (Enanium in 1.1) is also a system theme because it is used to display critical or database errors.

Within each theme directory there is a subdirectory named "css". All .css files in this directory will be listed out as individual styles for that theme. You should only have one file in css/ for each color theme you want - create a separate directory for common files and/or miscellaneous files. Names for styles are derived from the filenames of the files in css/. So, imagine that you have a CSS directory with the files "beryl.css", "emerald.css", and "aquamarine.css". The style names would be Beryl, Emerald, and Aquamarine.

Each theme directory needs to have several template files in it. These files are:

  • header.tpl: All HTML that goes before the body of the page.
  • footer.tpl: All HTML that goes after the body of the page.
  • acledit.tpl: ACL editor UI. This is parsed on the client, so no PHP.
  • comment.tpl: Layout for comments. Also parsed client-side.
  • elements.tpl: Sidebar and toolbar links, buttons, headings, labels. you name it.
  • sidebar-editor.tpl: Shouldn't need to be edited. Contains variables used in the sidebar editing interface.
  • simple-header.tpl: Simplified version of header.tpl used for redirects
  • simple-footer.tpl: Simplified version of footer.tpl used for redirects
  • theme.cfg: PHP file with basic information about the theme

theme.cfg

The file "theme.cfg" should set the global variable $theme to an array with the values of theme_id, which should be set to the name of the directory the theme is in, and theme_name, which should be the visible name of the theme. This should also contain licensing information for the theme in a source code comment. Here is an example theme.cfg:

<?php
 
/*
 * Bubblegum theme for Enano
 * Created by Rosie Nante - (C) 2007
 * License: GPL
 */
 
global $theme;
// name of the folder the theme's files are in
$theme['theme_id'] = 'bubblegum';
// the name that users can see
$theme['theme_name'] = 'Bubble Gum';
 
?>

Previous Section 5.1 - Introduction to Enano's theming system Next
Grouping pages for easier management Up one level Template syntax
© 2007 Contributors. All content is under the GNU Free Documentation License.
Powered by Enano | Valid XHTML 1.1 | Valid CSS | Time: 0.08s