Typescript

Easy Content Management

Theming your content

In Typescript, we give you both

Contact us
control over how a page is generated & full access to the underlying CSS. A theme is simply a collection of CSS files plus a few other text files that generate the HTML; they are listed below.

ts_theme.png

The image that is displayed to show a preview of the theme. If this file is omitted, Typescript will simply show no preview before applying the theme.
notes.txt
Typescript uses this file to provide some information about the theme you've created on the theme page. It isn't required for the functionality of the theme.
printstyles.css
Use this stylesheet to style your website adequately for print.
themestyles.css
The main stylesheet for the theme, providing styles for the screen.
theme.inc.php
This file is included in the <head> section of your website, therefore allowing you to <link> additional stylesheets, scripts or other assets.
template.php
This file contains what is placed into the <body> section of your website. Leaving this file blank will result in an empty site.

Page templates

The last of those files provides you with a great deal of flexibility; you can modify it to accommodate extra presentational divs that you may need for your CSS, or perhaps a PHP script that you’d like to run on every page. Typically, a template looks like this:

<?php //Template for an example theme ?> 

<div id="pagecontainer">
 
<div id="header">
<?php $template->header(); ?>
</div>

<div id="menucontainer">
<?php $template->menu(2); ?>
</div>
<?php $template->content(); ?>
 
<div id="footer">
<?php
$template->footer();
$template->editLink();
?>
</div>
</div>

Automatic menu generation

Of these template functions, the menu is the only one that takes any arguments. There are a number of different ways that you can guide visitors around your site, and you can choose whether you want an all-inclusive main menu or simply a list of a section’s pages that changes when you go to a new section. The table below provides a handy guide to these.


 
CodeDescriptionResult
$template->menu(0); Makes a list of links to all sections; a link to a section is a link to the first page of a section.
$template->menu(); $template->menu(1);Makes a list of links which includes all sections and pages.
$template->menu(2);As above, but omits the page link when a section has only one page.
$template->menu(3);Makes a list of all sections and pages but only the pages are links.
$template->menu(4);Makes a list of links to all pages within the current section.
$template->menu(5);As above, but the first page in the section is omitted.
$template->menu(6, prv, nxt);Produces numbered page links to all the pages within the current section. The strings prv and nxt contain the character(s) used for the previous and next links. e.g. $template->menu(6, '«', '»');
$template->menu(7, prvnxt);As above but omits the individual pages. e.g. $template->menu(7, 'Previous', 'Next');
$template->menu(string);Makes a breadcrumb trail, with the string parameter becoming the separator. Example uses $template->menu('>');
Home > Sample Pages > Page2

Combining menu generation, constants and template.php

You can utilise the current section menus to create some very powerful systems that are perfect for large sites that have a lot of pages. Combined with constants, PHP variables that are always accessible to a theme template, automatic menus are a highly useful tool indeed. This list gives you an idea of the constants available:

To have a current section menu scheme, you can use something like this in template.php:

 
<h3><?php echo TS_SECTION ?></h3> 

<?php $template->menu(4); ?>

Advanced CSS

Typescript supports any CSS you choose to throw at it; if it’s in your browser then it can be in Typescript. We are using some of the more advanced techniques in our themes to showcase both what is possible with CSS and what is possible with Typescript. Try changing the theme and see how the content reacts to the new styling.

It’s wonderful, it is.

Ray Middleton
​​​​​​​