WBT Manager 1.31
WBT Manager 1.31a
Customizing the WBT Manager Student
Interface
I: Simple changes
Aug. 15, 2000
Mark Schupp, Head of Development,
Integrity eLearning
By changing some graphics, editing a
couple of HTML pages, and modifying some settings, you can quickly change the
look of the WBT Manager web-server application.
The screenshots below are both of WBT Manager
|
WBT Manager 1.31 |
WBT Manager 1.31a |
The transformation from version 1.31 to 1.31a was performed by one of our web site designers. No programming was required! The changes consisted of modifying the top banner and home page, replacing the button graphics and changing text styles.
Top it
The top banner in WBT Manager is actually an HTML page called (surprise) banner.htm located in the HTML subdirectory of the WBT Manager installation directory. This file is available for customization and will not be overwritten by future releases. Perry, our web-master, just opened it in Macromedia's Dreamweaver and wailed away. Ditto for the main content area in home.htm.
You will note that the new top banner is somewhat taller than the original and that the navigation bar is wider. So let's talk for a minute about the WBT Manager frameset.
Frame it
The WBT Manager web server application runs in a nested frameset consisting of a top and bottom frame (called header and main respectively), and a left and right frame (called left and right). The top/bottom frameset is created by by the startup page default.asp. Embedding asp/set1.asp in the main frame creates the left/right frameset. The dimensions of the frames are controlled by entries in the file settings.asp in the root of the WBT Manager
installation directory. In an advanced customization article we will talk about
re-organizing the framesets but for now we will just tweak the frame sizes a
little.
Line 6 in settings.asp has a number of miscellaneous settings separated by commas. The 4th "comma piece" specifies the height of the top banner frame. Pieces 2 and 3 set the width of the navigation bar frame for IE and non-IE browsers respectively.
As shipped with WBT Manager version 1.31, line 6 settings.asp contains:
'32,112,130,55,,,,
The new version of settings.asp has a line 6 that looks like this:
'25,160,168,123,,,,
Note the increase in pieces 2, 3, and 4 (piece 1 controls the spacing of the navigation bar buttons as described below). For descriptions of the other settings in settings.asp see "Customizing the Web Server Module" in the WBT Manager help file.
Note: Most of the information stored in settings.asp is loaded when the first user accesses the web server application and remains in memory until the application reloads. Any changes made to settings.asp will not take effect until you "Unload" the web application from the IIS Administrator property sheet for the virtual directory or reboot the web server.
Now that the frames have been adjusted we can put wider buttons on the navigation bar.
Button it up
All of the buttons in WBT
Manager are replaceable graphics, including the submit buttons for the forms. To
change from:
to:
just replace the file stulog_p.gif and its mouse-over image stulog_g.gif in the images subdirectory. A list of all of the replaceable graphics and their purpose can be found in the WBT Manager help file.
Two more changes and the navigation bar will have its new look. First we want a new background for the navigation bar. Line 5 in settings.asp controls the background colors and graphics.
Old:
'#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,border_slice.gif,#FFFFFF
New:
'#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,nav_bg.jpg,#FFFFFF
Next, since the new buttons are shorter than the old buttons, we want to adjust the spacing on the navigation bar. Button vertical spacing is based on the value in piece 1 on line 6 in settings.asp. This is normally set to match the physical height of the button graphics. Gaps between buttons are set in multiples of 1/2 this value. For the new version it is set to 25 instead of 32.
The remaining buttons to be changed are used in the various forms within WBT Manager. A list of those buttons and their graphics is in the WBT Manager help file.
Font it
The final changes our webmaster
performed were to the fonts and styles.
WBT Manager uses an embedded style sheet that it extracts from pgstyle.asp and holds in memory. There are a number of class names that can be used to modify various pieces of text.
|
clsStuMenuTxt |
Used for the menu links on the student menu. |
|
clsAdmMenuTxt |
Used for the menu links on the administrator menu. |
|
clsClsMenuTxt |
Used for the menu links on the certification class menus. |
|
clsCrsMenuTxt |
Used for the menu links on the course menus. |
|
clsCrsMenuBlockTxt |
Used for the instructional block name text on the course menus. |
|
clsCatMenuTxt |
Used for the menu links on the catalog pages. |
|
clsSmInst |
Used for hints and minor instructions on forms and menus. |
|
clsMedInst |
Used where more emphasis is needed on instructions in a form or on a menu. |
|
clsLgInst |
Used for warning and error messages. |
|
clsMenuHdr |
Used for headings in framed tables on menu pages |
|
clsColumnHdr |
Used for headings in non-framed tables in results entry and catalog pages (typically would be an underlined style). |
|
clsColHdrTop |
Used above clsColumnHdr if the heading needs more than one line (allows clsColumnHdr to be underlined). |
|
clsLegend |
Used for the text explaining the meaning of the status graphics on menu pages. |
|
clsFormCap |
Used for captions of data fields on forms. |
|
clsFormData |
Used for the contents of data fields on forms. |
|
clsOptionTxt |
Used for checkbox and radio button captions |
|
clsRptColHdr |
Used for the column headings of the standard web-based reports. |
|
clsReportTxt |
Used for the data displayed on a standard web-based report. |
The simplest way to determine the class of the text you want to change the style of is to view the source of the page in the browser.
Here are the changes our webmaster made:
|
Old version of pgstyle.asp |
New version |
|
<% |
<% |
Now WBT Manager has a new look, and it was all done with no programming and typical web development tools. Next time we'll play around with the frame layout a bit.