How do I customize my course's background image?

Designer

The Doctum architecture allows for some pretty creative design solutions. At first glance, what seems to be a very simplistic approach to designs, with a handful of layouts, a few skins and some templates quickly can be turned by a skillful designer to be a powerful set of theming and skinning features.

The Doctum 2.0 Application templating system is designed for maximum flexibility, while maintaining as much control over the implementation as needed to deliver a superior learning experience.

Some key improvements introduced to Doctum via this system are a complete separation of content, presentation and behavior.

So, how can you get started creating backgrounds and branding your courses so they fit into your learning climate? A great first thing to customize is the course's background.

The Doctum player can load JPG, PNG, and SWF files as course backgrounds. The current course templates are 800x600 pixels. Simply create a graphic that size, load it into your course's media and you can now choose the graphic in the course's setup screen.

It really is that easy.

So how can you design your course to fit most attractively with the content in the foreground? The user interface elements? The logo in the top corner? Great questions.

The Doctum player is a layered environment, roughly resembling something like this graphic:
Doctum Player layers - Application

In the image above, the "Application" layer is highlighted. That is because this is the layer in which the background graphic is loaded into. This image sits behind all other course content.

The next thing you need to keep in mind when designing background images for your course is determining the size of your header image and what type of dashbar navigation you want to use in your course. These elements are components, which reside in this level pictured here:
Doctum Player layers - Components

Why do these components sizes mater in regards to your backgrounds? Well, the containers that hold them, their component sets, if you will, are flexibly sized. This means if you have a logo that is 60 pixels tall, your pages content will start 60 pixels from the top of the screen. Likewise, if your custom footer navigation SWF file is 60 pixels tall, your courses content will start 60 pixels from the bottom. Sound confusing? It might at first, but once you get it, you'll realize just how powerful this is... suddenly the number of layouts is virtually limitless. Depending on what you put in the header or footer area of your course, the layout grid could vary widely from course to course in your library.

Let's take a look at this example case. The logo/heaader graphic is actually 80 pixels tall, containing a logo in the graphic that is actually 60 pixels (10 pixels of padding/whitespacehave been given to it). You can see roughly in these images how large the content areas are and how large the navigational elements are.

One thing to keep n mind is that the various discrete component set areas have a default padding of 15 pixels around them on all sides. This heps ensure that your content looks it best and doesn't crash into the other regions of the screen.