lodeStar Learning Web Journal

By Robert N. Bilyk

This article focuses on controlling the appearance of activities created with the LodeStar authoring tool. In short, the article focuses on the LodeStar concept of themes. I’ll examine how to apply themes to our first generation of templates and then to our new Reindeer templates – so called because they are titled Brancher, Panner, Syncher and Mapper… a little reminiscent of Dasher, Dancer, Prancer and Vixen.

The second part of the article will briefly instruct users on how to generate their own themes and apply them to the LodeStar framework.

So let’s get started.

First generation templates
The LodeStar authoring tool allows an instructor to select a template that incorporates an instructional strategy useful in an eLearning course. ( Notice that I used the word template and not theme.)

Once an instructor has selected a template, turned it into a project and populated the project with content, s/he can select the appropriate colors for the project. The instructor can control the color of the header (the top strip), the footer (the bottom strip), and the background. A set of preselected colors and background texture is known as a theme. LodeStar comes with a number of themes that serve as a great starting point for the look and feel of your project.

I’ll choose the Presenter tempate to demonstrate how to apply themes to your projects. Like Presenter, the first generation templates that support the use of themes include:

Boardmaker
Challenger
Concentration
Crossword
Flashcards
PageTurner
Sequencer
SlideShow
Timeline
WebQuest

Once an instructor selects a template and turns it into a project with specific content, s/he can, in a sense, reskin the project by applying color choices and a background.

To apply a theme to a project, open the project and select Tools > Themes. You will see the Themes Editor displayed.

By default the look of the project will be derived from the -Default theme.

Let’s examine the screenshot below and identify the configurable parts.

First, there is the header and footer. This is the topmost strip of color and the bottommost strip of color. The header and footer are part of the –Default theme. The header for our first templates often included a title. In fact, this often confused LodeStar authors. We’ve received many emails asking how to change or erase the title that appeared in the header. The answer was always go to Tools > Themes, and change the title.

Secondly, there is a background color. Background colors are controlled by one or more of these properties:

Inner Background Color
Background Image
Background Alpha

Let’s understand each property, individually.

In the screenshot pictured above, the inner background color controls the color behind the text. The Background Image, however, overrides the background color. If the background color were white, and the background image were red, the background would be red. That would be true if the background alpha, the third element, were set to 100. Background alpha controls the opaqueness of the background image. A background alpha of 100 means that the background will be 100% background image regardless of the background color. As the background alpha gets lower in value (e.g. 50 or 0), the background color begins to shine through.

So let’s try an example. I’ll set the text color to white. (I did this through the text editor controls, not the Theme control). Next, I’ll set the Background Alpha of the Background Image to 100. Here is what I get.

Now let’s choose an entirely different theme. The choice I made is illustrated in the next screenshot of the LodeStar Theme editor.

I chose the Black theme. Now, I’ll review and, possibly, change each property and then show you the result.

Notice in the screenshot above that I chose the Black theme and that it is indicated in the label above the picture in the right column. Black.

Now let’s go down the list of properties:

Title: I type in Digital Photography.

HTML Background Color: This is the color of the web page that will host this learning object. I leave this one white, but could have easily chosen any color.

Width: This is the width of the learning object as it appears on theweb page. I’d highly recommend leaving this one alone.

Height: This is the height of the learning object as it appears on the web page. I’d highly recommend leaving this one alone.

Outer Background Color: For the first generation of templates, this controls the color of the rounded corners at the edge of the learning object (flash object). I’ll leave these black.

Inner Background Color: This is the color of background behind the text. I’ll change this to white. I can click on the little color square and use the color chooser dialog or I can type in the hexidecimal equivalent of white, which is #ffffff. (Why # ffffff means white is a long story.)

Background Image: This isn’t changeable. It comes packaged with the theme.

Background Alpha: I’ll change this to 0, which means that the background image won’t display at all.

I click on the OK button and show the results of my efforts. I get a very clean look. (I also changed the camera photo to one with a white background.)

Now let’s look at the second generation of templates: the Reindeer templates.

Second generation templates

The second generation templates include:
Brancher
Panner
Syncher
Mapper

Let’s examine the screenshot below and identify how the themes editor affects a project made from the Brancher template.

I’ll cover each property in the Theme Editor.

The choice of theme is a custom theme called eFolio_Blue. The last section of this article will show you how create your own themes like eFolio_Blue.

Title: I left this blank.

HTML Background Color: I set this to black. This controls the color of the hosting web page, which is not pictured here.

Width: I left this at 800.

Height: I left this at 470.

Outer Background Color: This controls the navigation strip of dark blue on the left side. In the first generation of templates, the outer background color played an almost inconsequential role. In the new templates, it will almost always control the navigation strip.

Inner Background Color: This controls the background color behind the text. I set this to light blue.

Background Image: This can’t be changed.

Background Alpha: I set this to 80, which means 80% opaque.

So, in summary, the key difference between the first and second generation of templates is the use of the Outer and Inner Background Color.

The next part of this article is on creating your own custom templates. It is rather technical.

Creating Custom Templates
For technically-oriented individuals

Let’s look at the files that make up a theme.

All of LodeStar’s projects are organized in the Projects Folder, wherever LodeStar is installed. Inside of each project is a folder titled Theme. Inside of the Theme folder, we have the list of files:

background.jpg
default.xml
header.jpg
footer.jpg
thumbnail.jpg

as well as others

The controlling file is the default.xml file. One of the jobs of default.xml is keep track of what files constitute the header, the footer and the background image. The default.xml also stores the properties of a theme.

Then we have the actual files that make up these parts. That is, footer.jpg, header.jpg, and background.jpg. (All of the jpgs can be replaced by swfs.) The footer does not have to be a file called footer.jpg. So what keeps track of which file is actually the footer, which file is the header, and which file is the background? The answer is the default.xml.

Inside the Default.xml, you will find an xml element that looks like this (Replace () with xml angle brackets):

(bgImage)bgImagebackground.jpg(/bgImage)

If you wanted a file called circus.jpg to be the background, you would replace the xml with:
(bgImage)circus.jpg(/bgImage)

You would also save circus.jpg to the theme folder.

You could also replace the background.jpg and background.swf with files of your own design.

Just be sure that they follow these dimensions:

background.jpg: 800 pixels wide by 470 high
background.swf: 800 pixels wide by 470 high
footer.jpg: 800 pixels wide by 20 high
footer.swf 800 pixels wide by 20 high

Finally, you will need to create a thumbnail.jpg that represents your custom theme. This should be 200 wide by 100 high.

Once you have changed the default.xml and swapped out all of those files listed above, its time to convert the contents of the theme folder into an archive.

You will need a tool that creates jar files. One of our favorites is Alzip from Altools, found at http://www.altools.com/Downloads.aspx.

In essence you are zipping up the folder. But instead of creating a zip file you are creating a jar file. A jar file is a JAVA archive. You use the same procedure as you would zipping up the contents of a folder. With the Altools archive maker, you would select an archive of type ‘Jar’. Set the compression ratio to be normal.

Once you have created a file, rename the extension as .startheme, then copy it into the [program directory]\LodeStar\Themes folder.

That’s it. With a little technical aptitude, You can create your own themes easily.