print page  |  view normal version 

Section 5.3 - Creating your own theme

Full-featured Enano themes can be created with relatively little Enano-specific work, provided that you understand the template syntax and directory layout. It is recommended that you use the code from an existing theme and base your new theme off of the existing one. A strong knowledge of XHTML and CSS is highly recommended, and basic XHTML and CSS knowledge is assumed in this guide.

Mind your international friends

Do you plan to redistribute your theme? If so, or if you are planning to install a right-to-left (RTL) language pack (such as Arabic or Hebrew) on your site, add RTL support to your theme. Enano 1.1.8 will introduce support for right-to-left languages. Depending on the language in use, the language variable {lang:meta_direction} will be set to either "ltr" or "rtl". You can load different or supplemental stylesheets using code similar to the following in your templates:

<link rel="stylesheet" type="text/css" href="{CDNPATH}/themes/{THEME_ID}/css-extra/{lang:meta_direction}.css?{ENANO_VERSION}" />

Note that you can support RTL in any version of Enano from 1.1.1 onwards by adding the meta_direction variable to your language pack and writing a theme that uses that variable. Enano 1.1.8 is the first version where RTL languages are officially supported, as the Enanium theme, jBox menus and TinyMCE were given RTL support.

Creating a new theme from an existing one

1. Clone the theme

Navigate to your Enano themes/ directory and copy the entire directory containing the theme you want to clone to whatever you want the new theme's ID to be. For the purposes of this example, we'll clone oxygen into bubblegum.

The following is the code used to clone a theme using a UNIX or Linux shell. If you only have FTP access to your server, you'll need to download, rename, and re-upload the directory.

cd /path/to/enano/themes
cp -a oxygen/ bubblegum

2. Edit theme.cfg

This step is important as it is necessary to point Enano to the right directory for parsing the theme files.

<?php
global $theme;
$theme['theme_id'] = 'bubblegum';
$theme['theme_name'] = 'Bubble gum';
?>

3. Install the new "theme"

Navigate to Appearance → Manage Themes in your administration panel. Select the new theme's name from the drop-down list labeled "Install a new theme", and click Install this Theme.

If you plan to change the names of the stylesheet files, and you plan to use the new theme as the default theme for your site, you'll need to set the default style by selecting the new theme under Currently Installed Themes, clicking Change Settings, selecting the appropriate default stylesheet, and clicking OK.

4. Change your current theme setting

Click on Change Theme on the sidebar. You'll see the theme changing interface come up. Select your new theme and then a stylesheet, then click OK to save your changes.

5. Edit the HTML

Now pull up your favorite IDE and edit the template code and CSS to your heart's content. It is not recommended that you use tools like Dreamweaver™ to modify the HTML. Enano uses many specially formatted comments that WYSIWYG editors can destroy.

Optionally, when editing your stylesheets, you can use regular template syntax. If you do this, be sure to set the path to the stylesheet file to {STYLE_LINK} instead of the defautl, "{SCRIPTPATH}/themes/{THEME_ID}/css/{STYLE_ID}.css".

Creating a new theme from scratch

You can also design your new theme from a clean slate. Experienced designers will prefer this as it provides greater flexibility and control over your theme.

1. Create your theme directory and config file

Create the subdirectory in themes/ according to the theme ID you want your new theme to use. Pull up Notepad or equivalent and type up your theme.cfg:

<?php
/*
 * Bubblegum - a fresh pink theme for Enano
 * Created by John Doe
 * Copyright (C) 2007
 * This theme is Free Software, available under the terms of the
 * GNU General Public License. See the file "GPL" included with
 * this distribution package for details.
 */
 
global $theme;
$theme['theme_id'] = 'bubblegum';
$theme['theme_name'] = 'Bubble gum';
?>

2. Create directories and files

Create a new subdirectory, "css", in your theme's directory. Make at least one .css file in there. Make sure that you only have one CSS file for each color theme you want, and use @import rules and another directory for shared CSS.

3. Install your theme

Install your theme using the same method described in section 3 of cloning the theme. Note that you'll have to change the default style later.

4. Create header.tpl and footer.tpl

The best way to create your header and footer templates is to design a pure HTML version, and then add Enano's custom code to them.

The contents of the HTML <head> tag used in your theme must be in a very specific order. Enano's client-side framework is nearly as big as its server-side framework, so things must be initialized using the same routine in every theme. This order is shown in the default theme (Oxygen in Enano 1.0, Enanium in Enano 1.2).

Any custom Javascript you may want to load for your theme should be absolutely last before your </head> tag.

5. Create elements.tpl

This file contains variables for the page toolbar and sidebar buttons. It is HIGHLY recommended that you base your elements.tpl on the ones used in Oxygen and St. Patty. elements.tpl should contain the following variables:

  • toolbar_button: A button on the page toolbar. Should contain the variables {HREF} (the href attribute for the <a>), {PARENTFLAGS} (used in the topmost tag), {FLAGS} (used in the <a>: tag) and {TEXT} (the text inside of the <a>)
  • toolbar_label: A label (static block of text) on the page toolbar. Should contain the variable {TEXT}.
  • toolbar_button_selected: A button on the page toolbar that appears "active" or selected. Should contain the variables {HREF}, {PARENTFLAGS}, {FLAGS}, and {TEXT}.
  • toolbar_menu_button: A button in drop-down menus for the page toolbar. Should contain the variables {HREF}, {FLAGS}, and {TEXT}.
  • toolbar_menu_block: A block of custom HTML as a menu item in the drop-down menu. Should contain the variable {HTML}.
  • sidebar_button: A link on the sidebar. Should contain the variables {HREF}, {FLAGS}, and {TEXT}.
  • sidebar_raw: Unused and left in for compatibility. A block of custom HTML on the sidebar. Should contain the variable {HTML}.
  • sidebar_heading: Unused and left in for compatibility. A heading, or top of a section, on the sidebar. Should contain the variable {TEXT}.
  • sidebar_top: The HTML printed before the start of a sidebar.
  • sidebar_section: The HTML that makes up a block on the sidebar. Copy and paste this from Oxygen if you know what's good for you.
  • sidebar_section_raw: The HTML that makes up a block of custom HTML on the sidebar. Copy and paste this from Oxygen is you know what's good for you.
  • sidebar_bottom: The HTML printed after a sidebar is finished.

At this point your theme should be just barely usable. Change to it as directed in step 4 above and try things out, then continue here.

6. Create a simple-header.tpl and simple-footer.tpl

These files are used for redirect pages. They should be based on your header.tpl and footer.tpl, but should be stripped down to include only a bare minimum set of visual elements.

7. Create other files

The last step is to create various miscellaneous files that Enano uses for less common tasks on your site. These files are:

  • acledit.tpl
  • comment.tpl
  • sidebar-editor.tpl

Most of the time, these should just be copied from another theme, because they rarely need to be customized.

Standardization

Many of Enano's special effects and dynamic applets require your page to conform to several specifications. These are discussed in the next section.

Previous Section 5.3 - Creating your own theme Next
Up one level
© 2007 Contributors. All content is under the GNU Free Documentation License.
Powered by Enano | Valid XHTML 1.1 | Valid CSS | Time: 0.15s