workgroup collaboration software
for business, education and more		 Home | About | Contact | Blog | CourseForum | ProjectForum


HOWTO: Creating New Themes

Last modified 4/6/2005.

Styles in Themes

Changing the look and feel is primarily done via stylesheets. This area describes some of the styles in those stylesheets that are most useful to customize.

body, div, p, etc.: These basic styles (at the top of most stylesheets) affect overall appearance; change background color and overall fonts here.

#pageheader: Used by many themes to provider a header bar at the top, containing page name, etc. Modify this to change its size, color, add a background image (e.g. corporate logo) and more.

#pagename: Adjust where and how the name of the current page is shown.

#forumname: Adjust where and how the name of the current forum is shown.

#pagecontent: Div for main body area of page; useful for adjusting margins, etc. Not used on content pages.

#bodycontent: Div for main body area of page; used on content pages.

#pagefooter: Div containing the footer area; not used on content pages.

#smallfooter: Div containing the footer area; used on content pages.

#bottomcontrols: Div containing the comment area, other command links, last modified, etc.

#viewbox: Div containing the four buttons, search form, key pages, recent changes etc. for content pages.

#commandbuttons: Div containing the post, edit, home, help buttons. Useful to reposition, hide, etc.

#keypages: Div containing the key pages.

#searchform: Div containing the search form.

#recentchanges: Longer (multi-line) display of recent changes. Usually either display this or the next, not both.

#shortrecentchanges: Short display of recent changes.

.heading: Formatting for headings.

.form*: Styles used primarily in forms (e.g. admin pages).

#adminpage*: Styles used on administration pages.

This document describes how you can create and install new themes, augmenting those already bundled with CourseForum and ProjectForum. For examples, see the theme exchange.

About Themes

Both CourseForum and ProjectForum (full versions only) offer a choice of themes, allowing administrators to radically change the appearance of the entire site or an individual forum. Both products ship with several themes already installed, and themes can be selected via the site or forum administration interfaces.

Why Create New Themes?

Besides the themes shipped with the products, new themes can be added to the available choices. Themes can be created so that CourseForum or ProjectForum sites are branded to match other web sites or institutional materials. Themes can be created also simply to match personal preferences.

What is Required to Create Themes?

Creating new themes requires an understanding of conventional web design techniques, including use of HTML and Cascading Style Sheets (CSS). Programming expertise is not required.

If you need assistance with these changes, or have particular needs that cannot be met through the customizations described here, please contact us to discuss your situation. If you would rather not do the work to create a new theme yourself, we can do this for you on a contract basis.

Creating and Modifying Themes

Starting with version 4.3, creating and modifying themes is done entirely via the web-based administration interface, in the "Custom Themes" section. You can create a new theme (starting with an existing theme), or modify any of the theme components (changing styles, adding or deleting images, etc.).

Other Example Themes

Our theme exchange contains images and downloads of several different themes, for inspiration or to try. If you've created an interesting looking theme and want to share it with others, please let us know.

Theme Components

Themes can contain a number of different types of components: CSS style sheets, images, HTML includes, and metadata, which can all be modified via the web-based theme editor.

CSS style sheets [styles.css, print.css]. Style sheets allow you to change the fonts, colors, and positioning of elements on the page. All pages automatically load in a main stylesheet, which you will want to customize. Simple changes can involve setting colors, fonts, adding images, etc. More complex changes can radically adjust the appearance of the site, whether different components are displayed, where they are located, etc. The sidebar describes some of the main styles that you may be interested in modifying.

A second stylesheet can also be provided, which will be loaded on the 'Print' pages after the main stylesheet. This can be used to adjust the appearance of the print pages slightly; see the 'Broadcast' theme for an example.

Images [home.gif, help.gif, edit.gif, post.gif, ...]. You can replace the various GIF images that are used throughout the software with your own images. You can also add your own images (e.g. a corporate logo), which would need to be referenced from the main stylesheet.

HTML includes [pagetop, pagebottom, contentend]. You can insert arbitrary new HTML code into pages by including any of these three HTML includes in your theme. You can use these for example to add header and footer areas to all pages. The HTML is inserted immediately after the initial <body> tag, immediately before the closing </body> tag, or right after the main content of the page, respectively.

Metadata [info.txt]. The theme also contains other metadata, such as the name of the theme, the size to use for dialog windows (e.g. attach file), the size to use for help windows, and the number of columns and rows in the textarea used for 'post your comments'. The theme editor presents each of these as options.

Custom Themes on Disk

Themes are created and modified using the web-based theme editor, so there is little reason to be concerned about how they are stored on disk. However, if you want to share your theme with someone else, or you are using a version of CourseForum or ProjectForum prior to version 4.3, this may be useful.

Themes are stored in the "themes" directory within the "Group Data" or "Course Data" directory. Each theme gets its own directory within that, and that directory will contain the theme files (styles.css, etc.). If the theme does not provide a particular file, the file from the default theme will be used in its place.

To make it easier to share themes, all the components of a theme can also be packaged into a single ".zip" file (created using zip, winzip, or other utilities). The ".zip" file can then be placed directly into the "themes" directory. Several such files are available for download on the theme exchange.

Copyright © 2002-2008 CourseForum Technologies:  Home | About Us | Contact | Blog