Themes

From . .. poMMo .. .

Jump to: navigation, search

Contents

[edit]

Related

ROUGH DRAFT...

A new theme engine debuted with the release of Aardvark PR11. Here's a quick overview...

NOTE: Text between {t}{/t} tags gets extracted for translation (to a different language). When you are creating your own themes, you'll likely want to leave out the {t}{/t} tags for:

  1. clarity,
  2. performance
If you do remove the {t}{/t} tags, the text between them will not be translated


[edit]

poMMo Themes Overview

Themes control the look and feel of the program

Themes consist of smarty template files

Smarty is a popular templating engine for PHP. It seperates "business" logic (for PHP programmers) from design logic (for web designers), making it possible for most people to change the look and feel of the program without being overwhelmed by PHP code.

Themes can be found under the /themes directory, and adhere to these organizational guidelines:

  • Layout: Themes consist of a collection of template (.tpl) files under Theme Directory. All administrative pages (subscriber management, mailing creation, list setup, etc.) reference template files in the admin subdirectory of a Theme Directory. All user pages (user login, unsubscription/update records page, confirmation page, etc.) reference template files in the theme's user subdirectory. The subscription form templates are found in the subscribe subdirectory. See the Anatomy of a Theme for a model.
  • Organization: The program references template files of the same name as their .php counterpart. For instance, /admin/setup/demographics_edit.php will attempt to load /themes/default/admin/demographics_edit.tpl if using the "default" theme.
  • Behavior: If a page's template file cannot be found in the current theme's directory, it tries to find it in the "default" theme's directory. This allows you to create themes which effect only one or two pages, and rely on the default theme's templates for the rest.
  • Resources There is a "shared" directory in /themes which contains javascripts and application images that the default theme uses. The same images, javascripts, and stylesheets can be accessed by any theme's template file using "{$url.theme.shared}/file.to.include". A full list of variables available to the templates is in the Resource section below.
[edit]

Creating a Theme

Quick overview on creating a theme

  • NOTE: Theme selection is currently disabled. The administrator will be able to select the theme to use with PR11.1. For now, just edit the default theme and make sure to store a backup of the original!
Create a directory under the /themes directory to hold your new theme's template files. Use the "default" theme (/themes/default/*) templates for reference or as a skeleton.
[edit]

Anatomy of a Theme

Following is the anatomy of the "default" theme. To work, your Theme Directory must mimick the heiarchy and template filenames. If your theme is missing a template, poMMo will fallback to the Default Theme's template file. This allows you the flexibility of creating partial themes to change the look of only a few pages -- say, the subscriber form and user pages.

(Theme Directory)/

> user/
(user section)
> admin/
(admin section)
> subscribe/
(subscribe section)
install.tpl
upgrade.tpl
[edit]

Theme Resources

Below are variables globally available to your smarty template files. Special variables (such as the list of demographics to loop through when printing out demographics, or the list of subscribers on a page) can only be accessed from a specific template (such as admin/demographics_edit.tpl). For now, these can be referenced in the default theme file... eventually they'll be documented.
Tip-> you can always include {debug} in the template file to see what variables are available, their settings, etc.
variable description example
url.theme.shared URL of the shared directory <script src="{$url.theme.shared}/form.js">
url.theme.this URL of the current theme's directory <img src="{$url.theme.this}/logo.jpg">
url.base URL of the bMail installation
url.http HTTP schema Either "http://" or "https://"
config.app.path The servers real path to the bMail installation useful for including files outside the URL
config.app.version The current version of bMail
config.app.weblink The URL of bMail's website
config.site_name The configured "site name"
config.site_url The configured website URL <a href="{$config.site_url}">back to {$config.site_name}</a>
config.list_name The configured "list name"
config.admin_email The configured email address of administrator
config.demo_mode Demonstration Mode status
title The title of page (as assigned by parent script)
section The section of the parent script -- used by sidebar usually "user", "setup", "mailings", or "subscribers"
[edit]

Naming Conventions

  • Theme Directory:
  • Default Theme:
[edit]

TODO

Explain inclusion of files outside theme directory; e.g. 

{if $datePicker}{include file="`$config.app.path`themes/shared/datepicker.tpl"}{/if}

Explain HTML <head> injection; e.g. 

{capture name=head}{* used to inject content into the HTML <head> *}
<script src="{$url.theme.shared}js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="{$url.theme.shared}js/scriptaculous/effects.js" type="text/javascript"></script>
{/capture}
{include file="admin/inc.header.tpl"}


[edit]

DocuNotes

  • It is not advisable to style or change support/themes.lib.tpl -- this file is the "support library" and is updated frequently between releases.
Retrieved from "http://pommo.org/Themes"
Personal tools