User Tools

Site Tools


themes

OpenDocMan Themes

OpenDocMan DMS includes some pre-designed themes which can be chosen by the site admin. While these themes are sufficient for most purposes there may be a time where you would like to create your own theme, or customize one of the included themes. This document will try and explain that process to make it easier for the community to build their own OpenDocMan themes.

OpenDocMan theme files are build using a combination of HTML, CSS, JavaScript, and use the Smarty template language for any code-generated values.

File Structure

OpenDocMan themes are contained inside the “templates” folder. There are currently three themes that come with OpenDocMan:

  • default - The original OpenDocMan theme design.
  • tweeter - A new design based on Twitter Bootstrap
  • common - This is a collection of common theme files that are typically shared with all themes.

Inside each of the them folders are the bare-minimum files:

  • footer.tpl - The site-wide Smarty footer file. This file will be displayed for every page, and will be rendered last.
  • header.tpl - The site-wide Smarty header file. This file will be displayed for every page, and will be rendered AFTER the common header
  • README - A readme file which contains copyright information and details about your theme which might be helpful to other developers

Aside from the mandatory files, you can also include the following folders to help separate your assets:

  • css - A folder which can hold your CSS files
  • img - A folder that holds any images your theme might require
  • js - A folder for JavaScript assets specific to your theme

Customization of a Theme

The best way to start off with OpenDocMan themes is to customize one of the included themes. To customize the “default” theme:

  1. Copy the “default” folder contents into a new folder “mynewtheme”
  2. You can edit the header.tpl file which links to the default/css/default.css file and change it to point to the new location (ex. mynewthtme/css/default.css).
  3. Login as the OpenDocMan site root user, select “Admin→Site Settings” then select your new theme file as the “theme” setting.
  4. On the next page-load you should now be using your new theme.

Creating a New Theme

If you are interested in creating a new theme from scratch:

  1. Create a new theme folder (ex. templates/mynewtheme)
  2. Create the header.tpl file - This should contain all of your HTML starting with
    <!DOCTYPE html>

    but should not include the

    </body>

    tag (which will be included in your footer.tpl file)

  3. Create the footer.tpl file - This should contain the footer area of your site that displays below the OpenDocMan content and should include
    </body>

    and

    </html>

    tags.

  4. When creating your own header.tpl file make sure to copy the line that is commented in the templates/default/header.tpl file. This will make sure that the common template files are loaded.
Accessing Variables Inside Your Template

There are some OpenDocMan generated Smarty variables available to you inside your new template. Here is a brief list of them:

  • $g_title - The global site title
  • $title - The page title passed in from OpenDocMan
  • $g_base_url - The global base URL for your site (as set in your site settings)
  • $g_lang_* - These are language variables used for internationalization. If the language file contains the phrase name of “test_phrase”, then to access that interpreted string inside your template you would append “$g_lang_” to the front of that, making it “$g_lang_test_phrase”.
  • $isadmin - Are then an administrator user?
  • $isroot - Are they the root user?
  • $username - Their assigned username
  • $breadcrumb - The system-generated breadcrumb navigation
  • $lastmessage - The last error/success message
Over-riding common template files

If you would like to re-design any of the templates which are found inside the common/ template folder you can do so by simply including a file with the same name inside your template folder.

For example, lets say you wanted to make a change to the common login template. You would create a new file inside your template named login.tpl (ex. templates/mynewtheme/login.tpl). When OpenDocMan is opening a theme file for a specific page, it will search first inside the current theme folder, then inside the “common” theme folder.

themes.txt · Last modified: 2013/02/23 17:41 by admin