Documentation » Theme Creation Guide

Theme Creation Guide

gpEasy Themes

Using Themes

Creating Themes

This is a step by step guide for creating new themes for Typesetter CMS.

Getting Started

The easiest way to get started is by downloading a bare bones theme like the skeleton theme. Unzip the package to your computer and you'll find the essential files and structure of a Typesetter theme.

Files

After you unzip the skeleton theme, you'll find four files and one subfolder:

../skeleton/template.php
../skeleton/settings.php
../skeleton/Addon.ini
../skeleton/Color/style.css

This is the basic structure of a Typesetter theme where template.php contains the html and style.css contains the css.

template.php

The template.php file contains the html and php calls to organize your theme. There are a number of output functions available, but you'll need to include at least three: $page->GetContent(), gpOutput::GetHead(), gpOutput::GetAdminLink().

Here's an example of a very minimal template.php file.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <?php gpOutput::GetHead(); ?>
    </head>
    <body>
    <?php $page->GetContent(); ?>
    <?php gpOutput::GetAdminLink(); ?>
  </body>
</html>

style.css

A theme should have at least one css file named style.css. You'll notice in the template.php file, the style.css file is not referenced. This is handled automatically by Typesetter in the gpOutput::GetHead(); portion of the template.

CSS Considerations

For compatibility with Typesetter's admin interface, there are certain style considerations you should make.

The top margin of the html and body should be zero.

html,body{ margin-top:0; }

Addon.ini

The Addon.ini file is not required for your theme to work unless you want to upload it to typesettercms.com.