MWeb™ Universal Administrator's Guide

3. Configuring the Interface

Introduction

MWeb Universal lets you choose from and modify a variety of settings that affect the appearance of the user interface. You can change these anytime -- before or after you have configured the Databases. When you make a change it takes place immediately.

Settings controlling displays are to be found in various places in MWeb. Instructions for each one are shown below. In addition, there is a table with an overview of all these settings.

Quick overview

There are only a few displays in MWeb, and they are all generated based on a layout template. MWeb comes with several layout templates, such as having the Main Menu along the top or down the left side. You may select what layout you prefer. In addition, MWeb comes with several color schemes which you can select. Several other options are available as well. All the layout options will be expanded in the next release.

In addition to the layout options, displays are also controlled by a Cascading Style Sheet (commonly called a "CSS stylesheet"), and by several Extensible Stylesheet Language Transformations ("XSLT stylesheets"). Although we do not support changes to these, if you are familiar with these you may modify them to get more precise control over colors, alignments, and other visual aspects of MWeb. (Since we do not support changes to these, make safe copies before changing so you can get back to the originals. Incorrect modifications can make MWeb useless.)

Finally, the text of some messages can be changed. This allows you to add a logo or graphic to the Toppane, to customize the page footer, etc. Additional message customization will be added in the next release.

Search displays

Keyword Search and Advanced Search are displayed in a width less than that of the browser window; the width is controlled by the NarrowWidth setting.

The search displays have Sidebars to provide immediate user help without having to have a popup window. The Sidebars also describe each Database in your Project.

Search Results displays

After the user does a search, the results are shown in Search Results. If the user selected All records as the Records to be searched option, the results are shown in the Search Results data layout. Instead, if the user selected Only records with images as the Records to be searched, the results are shown in the Search Results thumbnail layout.

You may select from two layouts for the Search Results data layout, depending on whether you want the data to show in tabular form or in paragraph form. Both options include a thumbnail image for records that have images; the thumbnail is clickable to view the full-size image in a popup window. In all of these, you can control which fields display, the order they display, and the column headings for the tabular form; this is the Configure Fields function.

In all Search Results displays, each brief record has a graphic for the user to click to view the Full Record. By default, this is a white arrow in a blue circle . If this is too subtle, you may use the alternate graphic which includes the words "Full Record" . You may also substitute your own graphic by simply replacing the image Fullrecord.gif in the MWeb graphics directory (by default, this is at c:\mweb\unigraphics).

The use of a graphic instead of a link was a deliberate choice. This is because MWeb must accomodate any fieldnames and data. Making links out of certain fieldnames and/or data values would be confusing to users.

Search Results (and Full Records) are always displayed in the full width of the browser window in order to let the user see the maximum amount of information. After all, this is the ultimate purpose of MWeb!

Full Record displays

The Full Record display shows, for a single record, all the data fields you wish to display, as well as all the images for that record. All images are clickable to view the full-size images in popup windows. You can control which fields display, the order they display, and the labels for each field; this is the Configure Fields function.

Full Records are always displayed in the full width of the browser window in order to let the user see the maximum amount of information.

There are two Full Record layouts. One has data on the left and thumbnails on the right. The other shows the first image larger on the left, with the other images as thumbnails under it; the data is on the right.

Image Windows

When the user clicks on a thumbnail in Search Results or Full Records, the full-size image is opened in a new browser window. Any number of Image Windows may be opened at once, in order to compare images.

In Release 2.0 and later, you may change the default size in which the Image Windows open by using the Admin / Project menu buttons.

Top

Customizing the Splash Screen

MWeb is installed with a default Splash Screen that redirects users to the Keyword Search display. This is the file c:\mweb\uni\Index.htm. If you wish, you may replace it with your own Splash Screen containing any design, wording, and graphics you wish. (A Splash Screen you create is not part of MWeb and is your responsibility.) Here's how to do this:

Create the Splash Screen. It can be simple HTML or include ASP, Flash, or other technologies if you wish.
Add to the Splash Screen either of the following:

1. A button or link to go to the MWeb Keyword Search screen.

2. An automatic redirect to go to the MWeb Keyword Search after a certain number of seconds.

You may combine these two, so that a user may click the button or link, but if s/he does not, the redirect is done automatically after the number of seconds has elapsed.
Name your Splash Screen "Index.htm" and replace the existing one in c:\mweb\uni\ with yours.

Top

Changing Layouts

Changing layout of all pages

MWeb gives you several choices for the physical Layout of your MWeb website. All choices will work with any set of data. To change the Layout, begin by logging on as the Project Owner. Then, in the Administrator Control Center, click the Layouts button, then the Layout/Colors/Fonts button in the Layouts Submenu.

In the first area, select one of the 12 layout and color options. We recommend that you select a layout with the menu across the top, because this provides more horizontal space for displaying search results. Also, the tables used to configure the Project and Databases are rather wide and may require horizontal scrolling if a vertical menu is used.
Next, you can decide whether to have a horizontal separator under the top pane.
Next, decide whether the contents of the Toppane should be centered or at the left. By default, the Toppane contains the Project Name, but you may use the Change Messages feature to add a logo or any other contents if you wish.
Next, choose the font style you prefer.
Last, click the Accept New Layout & Font Style button.

Because changing the Layout also changes the MWeb.css stylesheet, you may need to hold the shift key and click your browser's Reload or Refresh button in order to see all the changes.

Warning: Changing the Layout also changes the MWeb.css stylesheet. This will overwrite any custom CSS. If you have changed MWeb.css by hand, do not use MWeb to change the Layout. If you did so accidentally, restore the MWeb.css from the backup copy Previous_mweb.css.

Changing layout of Search Results and Full Records

The layout of Search Results and Full Record displays is controlled by XSLT stylesheets. To select which stylesheets to use, begin by logging on as the Project Owner. Then, in the Administrator Control Center, click the Layouts button, then the XSLT Stylesheets button in the Layouts Submenu.

You will see a simple display with two sets of radio buttons to choose among the layouts currently provided with MWeb. When you have chosen, click the Accept New XSLT Settings button.

Top

Adding a Logo

You can change the text and add a logo or other graphic to the MWeb Toppane (the top of each screen). You can use graphics, tables, or other techniques to achieve the look you want. Here's how to change the default text (the Project Name you assigned) to a logo, which can be a JPEG or a GIF.

Log on as the Project Owner.
In the Administrator Control Center, click the Messages button.
You will see a list of message categories; click on ALL PAGES to change the messages that appear in all MWeb displays.
Click on AP_PAGEBANNER.

Replace the text with this text:

     <img src='/GRAPHICSLOCATION/yourlogo.jpg' 
     style='vertical-align:top'>

Or, to display both a logo and text, use this text:

     <img src='/GRAPHICSLOCATION/yourlogo.jpg' 
     style='vertical-align:middle'> Your text

Be sure to use ALL CAPS for the word "GRAPHICSLOCATION".

Click Save when editing is complete, or Cancel to discard your changes.

After you save, the message table is usually refreshed to show your changes; if not click your browser's Refresh or Reload button.

Unfortunately the HTML/CSS rules about aligning images with text are quite complex and counter-intuitive, so you may have to experiment to achieve your desired alignment and still eliminate unwanted margins around the image.

Adding a background graphic

You may also change the CSS file c:\mweb\uni\MWeb.css to add a background graphic to the toppane. To add text over the image, use the technique above to change the AP_WINDOWTITLE message, adding your text instead of a graphic. You must have some text, even a space, to suppress the default MWeb text.

Modifications to the CSS file are not supported.

Top

Changing Messages

You can change the wording of some MWeb messages. To do so, begin by logging on as the Project Owner. Then, in the Administrator Control Center, click the Messages button. You will see a list of message categories; click on "ALL PAGES" to change the messages that appear in all MWeb displays.

Each message has a unique name. To change a message, click its name in the table. The message opens in a new window for editing. Click Save when editing is complete, or Cancel to discard your changes. After you save, the message table is usually refreshed to show your changes; if not click your browser's Refresh or Reload button.

Entering message text

Most text is entered normally, but there are some exceptions, because text in the entry area does not always look like text as displayed in MWeb. We recommend that after you save changes to a message, look at it immediately in MWeb to ensure it is as you wish.

HTML format codes, such as <b>, <i>, <center>, <p>, <br>,  , font codes, etc., may be used to format the message. (However, MWeb applies additional formatting to messages based on your layout and style preferences, so there you may not have complete flexibility.)

Entering special characters (Unicodes)

Before adding a Unicode, make sure the code exists in the font the message is displayed in (which is determined by the fonts and styles you chose). To check this, use the Windows "Character Map" application, choose the relevant font and the Unicode character set. Then search for the character you want to use.

The fonts used are these: Modern: Verdana; Retro: Arial; Classic: Georgia. Alternative fonts are used if a user's browser does not have the one shown.

To enter a Unicode, use the hexadecimal Unicode value, preceeded by &#x and followed by a semicolon, like this:

     &#x00FD;

Top

Changing CSS Stylesheets

We do not support changes to either the CSS or XSLT stylesheets. Changing of stylesheets is for experts only. Minor changes can cause displays to become horribly broken or to disappear entirely. If you have problems, replace the stylesheets with the original ones that came with MWeb Universal.

The appearance of MWeb Universal is controlled by two CSS stylesheets, MWeb.css and MWebprint.css. The first controls both screen displays and printing; the second adds additional styles for printing. Normally you will not need to change MWebprint.css.

Note that using MWeb's feature to change the Layout alphabetizes the styles; this is intended to make styles easier to find. In addition, MWeb cannot handle comments in stylesheets; if you add comments and then make any layout modifications through MWeb, things will go wrong.

Top

Using XML and XSLT

The Data Connectors return all responses in XML. The XML is converted to HTML for display by using XSLT stylesheets. If you understand the XML format and how to modify XSLT stylesheets, you can alter the way MWeb displays your information.

The data displays in MWeb Universal are controlled by XSLT stylesheets. These convert the XML data from the Database Servers into HTML. The Administrator Control Center allows you to select which ones to use. You may also modify these or substitute your own (but see warning above). Here are the stylesheets used to display your data that come with MWeb:

SRDpara.xsl: Search Results (data layout) in paragraph format
SRDtable.xsl: Search Results (data layout) in tabular format
SRI.xsl: Search Results (thumbnail layout) in lightbox format
FRtable.xsl: Full Record in tabular format with all images shown as thumbnails
FRalt.xsl: Full Record in tabular format with first image larger, others as thumbnails

In addition, MWeb includes other XSLT files for display of Control Tables and other administrative data. We strongly recommend you do not modify these tables.

Top

All contents of website, including HTML and JavaScript, copyright © 1996-2010 Systems Planning. MWeb, InFORMer, and CAPS are trademarks of Selago Design, Inc. MARCView and MARConvert are trademarks of OCLC, Inc.

Systems Planning
4915 Redford Road
Bethesda, MD 20816 USA
(301) 652-1231
info@systemsplanning.com

Including the name of one of our products in the subject of your message will bypass all spam filters.