Theme structure

A theme is a series of files in a folder, underneath themes. It needs to be installed before it will be used.

The structure of a Theme is as follows...

  • config
  • css
    • style.css
    • menu.css

  • images
  • js
    • functions.js

  • description.txt
  • favicon.ico
  • global.php
  • license.txt
  • readme.txt
  • setup.php
  • TemplateOptions.php
  • uninstall.php

config

The config folder is largely unused in themes. It behaves in the same way as for plugins.

css

The CSS folder is one of the more important parts of a theme. Most of your CSS code should go into style.css

style.css - Contains the main styles for the site.
menu.css - Optional - we like to separate out menu styles from main styles, but menu styles can also be included in style.css if preferred.

print.css - Any styles required for printed versions of the page. We recommend taking a few minutes to write a print stylesheet, which hides the navigation and headers, and converts coloured headings to black and white etc.

handheld.css - If you would like to accommodate for PDAs and mobile phones, you can include special handheld styles here.

images

Jojo stores images within plugin folders, but they are referenced through the browser as "images/imagename.jpg", instead of "themes/your_theme/images/imagename.jpg". We like CMS websites that look like static websites, and a nice images folder is one way to do this.

When you link to your images in your template, link to "images/imagename.jpg".
If another image of the same name exists in another plugin, the image in the theme will be given priority.

js

Javascript that is required for a theme should be placed in the js/functions.js file. This Javascript code will be collated and included in common.js, which is the main Javascript file used by Jojo.
We recommend placing Javascript in this external file as opposed to using <script> tags within the template - external files are a cleaner way of handling script.

description.txt

This is a one-sentence description of the theme - used for the theme listing page.

favicon.ico

The favicon is a small icon file which will appear on tabs in Firefox and on bookmarks in Internet Explorer. More and more sites use these now, and we recommend creating one for your site as it makes it easy for users to identify your site.
This should be a 256 color 16x16 pixel .ico icon file. There are many free programs that can create these, we recommend Conware IconArt.