Theming

Theming for Travelsized CMS is a simple process, involving only knowledge of HTML (or WML or XHTML or whichever type of web-technology you wish to use). The only requirement is a specific set of styles used by the management interface. The CSS can be found in the sample theme, and is the only content of the CSS file in that folder. In this CSS file is also a set of options for customising the logout, setupsite and editthispage buttons and links.

To make a theme, simply make the layout for a web-site as you would normally and then put in placeholders where the actual content will go. A placeholder in Travelsized CMS is an all-capitals set of characters encapsulated in a set of hash marks, for example ##THISTHEME##, which translates into the directory where the current theme is contained (for example "setup/themes/default").

The best thing for learning how to do this is by example. Thus, here is the sample theme included with Travelsized:

• theme.html
• theme.css

Special CSS ids and selectors:

• .menutext
• .wikitable
• .setupsite
• .newpage
• .newmenu
• .editthispage
• .logout
• .page_help_term
• .page_help_description
• .description - Style description links differently
• .table...

List of Travelsized CMS Theme placeholders:

Internal placeholders:

General placeholders

• ##THISTHEME##
  • The folder for the current theme (see above)
• ##POWEREDBY##
  • A graphic button with the text "powered by Travelsized CMS", 60x26 pixels, PNG
• ##LASTUPDATE##
  • A textual representation of the time of the last change
• ##SETUPSITE##
  • Text link to site setup
• ##SETUPSITE_GRAPHIC##
  • Graphical link (10x10 pixels) to site setup
• ##NEWPAGE##
  • Create a new page
• ##NEWPAGE_GRAPHIC##
  • Create a new page, graphical link (10x10 pixels)
• ##NEWMENU##
  • Create a new menu
• ##NEWMENU_GRAPHIC##
  • Create a new menu, graphical link (10x10 pixels)
• ##EDITTHISPAGE##
  • Edit current page link
• ##EDITTHISPAGE_GRAPHIC##
  • Edit current page, graphical link (10x10 pixels)
• ##LOGINFORM##
  • A small login form, for use in a sidebar. Also shows user information
• ##LOGOUT##
  • Log out text link
• ##LOGOUT_GRAPHIC##
  • Log out graphical link (10x10 pixels)
• ##RECENTCHANGES_LIST_HORIZONTAL##
  • The latest changes, between 0 and 10 items, listed horizontally
• ##RECENTCHANGES_LIST_VERTICAL##
  • The latest changes, between 0 and 10 items, listed vertically
• ##RECENTCHANGES_LIST_DROPDOWN##
  • The latest changes, between 0 and 10 items, as options (for use with a <select> </select> form)
• ##THEME_LIST_HORIZONTAL##
  • A list of all themes, listed horizontally
• ##THEME_LIST_VERTICAL##
  • A list of all themes, listed vertically
• ##THEME_LIST_DROPDOWN##
  • A list of all themes, as options (for use with a <select> </select> form)
• ##META_HEADERS##
  • The meta headers and link headers relevant to the current page

Page related placeholders

• ##PAGE_TITLE##
  • The title of the current page, without formatting
• ##PAGE_CONTENT##
  • The content of the current page, rendered to HTML
• ##PAGE_AUTHOR##
  • The page author's name, without formatting
• ##PAGE_AUTHOR_EMAIL##
  • The page author's email address, without formatting
• ##PAGE_DATE##
  • The last change date of the current page
• ##PAGE_ID##
  • The current page ID
• ##PAGE_MENU##
  • The current page's menu, rendered to HTML
• ##MENU_ID##
  • The current page's menu's ID

Internationalisation placeholders

The following is a simple list, where the placeholders are shown with their English language translation. Some may seem banale, but they are nessecary for internationalisation reasons. They enable the entire site to be translated, including the interface and not just the content.

• ##READMORE##
  • Read more
• ##FINDINFO##
  • Find information
• ##FINDIT##
  • Find it
• ##USERFUNCTIONS##
  • User functions
• ##GOFRONTPAGE##
  • Go to the Front page
• ##GOTAGWALL##
  • go to the Tag wall
• ##GOPAGELIST##
  • See list of all pages
• ##ADMINFUNCTIONS##
  • Administration functions
• ##SELECTTHEME##
  • Select theme
• ##CHANGETHEME##
  • Change theme
• ##SELECTLANGUAGE##
  • Select language
• ##COPYRIGHT##
  • This page is copyright © 2003 by <a class=\"footer\" href=\"./index.php?page=About%20me&amp;language=en\">..Dan Jensen</a>. All rights reserved.

Special placeholders

Language placeholders:

• ##LANGUAGE##
  • Contains the current language code
• ##LANGUAGENAME_??##
  • This contains the textual name of the language with the language code ??
• ##LANGUAGELINK_??##
  • This contains a local url to the current page, but in the language ?? (country code, for example "en", "dk", "se", "fr"...).

Used for example as this: <a href="#LANGUAGELINK_EN##">##LANGUAGENAME_EN##\</a> | \<a href="#LANGUAGELINK_DK##">#LANGUAGENAME_DK

Theme placeholders

This set of placeholders is rather special, and allows you to i18n your themes. By creating a number of files named messages.??.txt, where ?? is the country code for the language the file contains, each line in these files are read by Travelsized and put into a set of placeholders named ##THEME_1##, ##THEME_2## and so on, the numbers being the line number in the file.

Step by Step guide to Theming for Travelsized CMS

1. Make a new web-site somewhere on your filesystem using your favorite web development environment (Dreamweaver, Quanta+, Kate, emacs...)
2. Edit this web-site to suit you, using the place-holders described above.