HOWTO: CourseForum/ProjectForum Branding

Last modified 11/7/2003.

IMPORTANT: Branding support has been made easier and more flexible in Version 3.0 using the new themes mechanism. Please see our Themes HOWTO for more information.

This document describes how you can modify the appearance of CourseForum or ProjectForum. This will allow you to "brand" your CourseForum/ProjectForum site to more closely match the look of other web sites that you may be running.

Customizing the site branding requires an understanding of conventional web design techniques, including use of HTML and Cascading Style Sheets (CSS).

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

Home Page Message

You can customize the informational paragraph that appears on the right side of the home page. This is done through the Site Administration screen. Modify the "Home page message" field near the bottom. You can put in whatever text you want, as well as including HTML tags, letting you add formatting, include logos or other images hosted on web servers, etc.

Style Sheets and Images

As of version 1.1, you can modify the style sheets and images that CourseForum or ProjectForum uses. This lets you adjust fonts, colors, formatting, and so on.

To use this feature, you need to locate the "Course Data" directory where CourseForum stores all of its data files. This is located in the directory you run the CourseForum from, except on Mac OS X, where you can find it in your ~/Library/Application Support/CourseForum directory.

Within that directory, create a new directory named "branding". Within that new branding directory, create four other directories, named "admin", "course", "project", and "archived". These correspond to the four different types of areas found in the interface: site administration areas, courses (groups in ProjectForum), projects, and archived courses/groups or projects.

You can then choose what elements you'd like to replace. If you'd like to provide a new stylesheet for all (un-archived) courses or groups, you would create a new stylesheet named "styles.css" in the "branding/course" directory. If you wanted to use the same new stylesheet for projects, it would be placed in the "branding/project" directory. Below is a directory tree showing all the possible files that you can provide, their names, and in what directory they would belong. Note that any time you don't provide a file, the original will be used, so you don't need to supply all of these.

branding/
       admin/
             styles.css
       course/
             styles.css
             home.gif
             help.gif
             edit.gif
             post.gif
       project/
             styles.css
             home.gif
             help.gif
             edit.gif
             post.gif
       archived/
             styles.css

What should each of these files contain? Its best to start with the original file, and make modifications. Use your browser to download the originals from your running CourseForum/ProjectForum site. For example, you can load http://<site>:3455/admin/styles.css to get the stylesheet for the administration area (each area uses its own stylesheet!). Similarly, download the original GIF files for the buttons from the course/group or project pages. Make any modifications you need, and then save them into the appropriate location in the branding directory.

Note that CourseForum/ProjectForum will look for this branding directory only when the server first starts. So if you make changes, you will need to restart your CourseForum/ProjectForum server to see the results. (You'll also want to make sure your web browser isn't using a cached copy).

A final caveat is that you'll want to be careful when upgrading to a new version of CourseForum/ProjectForum. Some of the original items may have changed (e.g. new styles added to the stylesheets), which you'll want to add to your modified version.

Adding New Page Elements

As of CourseForum/ProjectForum 2.1, you can supply several new page elements, which will be inserted into all displayed pages. These are provided as snippets of HTML code, and act like server-side includes in many web servers. New elements can be added at these locations:

• at the very top of the page, before the header bar ("pagetop")
• at the very bottom of the page, after the existing footer ("pagebottom")
• at the very left of the title bar line, useful for including a small graphic to display in the title bar ("titleleft")
• at the very right of the title bar line ("titleright")

As with style sheet and image substitutions, you will makes these changes by placing files in the "branding" directory you create. There included files will go in a subdirectory of "branding" named "include". Each HTML snippet goes into its own file, with the file named as indicated above (e.g. "branding/include/pagetop"). These files are read when the application is first started.

Common Problems

Here are some common problems that people encounter while customizing the appearance of their CourseForum or ProjectForum site:

• make sure the CSS files are saved as plain text, and not as RTF or other formatted text file
• though there are similarities between the four different stylesheets, there are important differences as well; make sure you edit the correct ones and place them in the right directory, e.g. do not place the 'admin' stylesheet in the 'course' directory, or your course pages will not render correctly
• note that the include files do not have a ".html" extension

Other Changes

If you require other changes beyond what has been described here, please contact us to discuss your requirements. As well, if you would prefer not to do the branding work yourself, please contact us to discuss how we can assist you on a contract development basis.