Configure the appearance of a Web Determinations interview
The appearance of the Web Determinations interview is controlled by what is termed skinning and themeing. Essentially, this is the ability to configure the look and feel of the user interface to suit a particular deployment's needs, which could be anything from simply changing a few colors and logos to a complete re-design of the layout and rendering of every screen in the application.
Customization can be managed at a number of levels ranging in complexity as follows:
- Properties (appearance.country-locale.properties)
The default properties containing display text and logos can be changed to alter the basic look and feel of your interview.
- CSS (main.vm.css)
The core page structure is a pure CSS layout. Simple look and feel/theming changes can be achieved by using CSS alone, but when used in conjunction with property changes, you can also effect changes to positioning, text styles, colors and layout.
- Page Structure and CSS (*.vm)
The core page structure is put in place using velocity templates to directly edit both HTML and CSS content directly, allowing deeper and more complex customization and extension of the web experience. Velocity templates take the form of page.vm or page_css.vm and are used to change text, logo's, colors, text styles, layout, core html structure, provide javascript and other rich media extension, customize form behavior as well as any html generated content. Documentation is available at http://velocity.apache.org/engine/devel/user-guide.html.
What do you want to do?
Change the look and feel
Understand IsHTML and Web Determinations customization
Change the appearance of a web interview control
Change the appearance of only one screen type
Localize the interview
Change the look and feel
To change the layout and styling of your Web Determinations interview, do the following:
- Locate the web determinations main folder as follows:
Tomcat (Java) – default is the Web Determinations web application in the Tomcat webapps folder; for example:
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\web-determinations\WEB-INF\classes\
IIS (.Net) – default is in:
C:\inetpub\web-determinations\bin\
- Modify the following to change the styling, layout, and web widgets (images, and so on) to match corporate branding:
- Modify the Velocity templates in the templates\includes folder to change the layout of the interview screens. For more information about working with Velocity templates, see the Velocity Templates Developer Guide.
- Modify the templates\main.vm.css to change CSS-controlled HTML styles, and also configuration/appearance.[locale].properties for other styles and widget controls.
- Add web widgets such as images or flash objects that are used by the templates and styles in images and resources folders.
- Make modifications to the text contents of the pages/templates in configuration/messages.[locale].properties.
- Save the changes; note that by default, changes to templates and properties files do not require a server restart, but the Web Determinations application server can be configured to load and cache them (configuration/application.properties) in which case a restart is required.
Change the appearance of a web interview control
The following steps describe how to change the appearance of all web interview controls of a particular type; for example, a list box:
- Locate the web determinations main folder as follows:
Tomcat (Java) – default is the Web Determinations web application in the Tomcat webapps folder; for example:
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\web-determinations\WEB-INF\classes\
IIS (.Net) – default is in:
C:\inetpub\web-determinations\bin\
- Go to the templates folder and locate the template for the control to be modified; see Velocity Templates Developer Guide for a description of each of the available predefined templates.
- Make modifications to the text associated with the control in configuration/messages.[locale].properties.
- Save the changes; note that by default, changes to templates and properties files do not require a server restart, but the Web Determinations application server can be configured to load and cache them (configuration/application.properties) in which case a restart is required.
Change the appearance of only one screen type
The following steps describe how to change the appearance of screens of a particular type a particular type; for example, an investigation screen
- Locate the web determinations main folder as follows:
Tomcat (Java) – default is the Web Determinations web application in the Tomcat webapps folder; for example:
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\web-determinations\WEB-INF\classes\
IIS (.Net) – default is in:
C:\inetpub\web-determinations\bin\
- Go to the templates folder and locate the template for the screen type to be modified; see Velocity Templates Developer Guide for a description of each of the available predefined templates.
- Make the desired modifications to the screen template.
- Save the changes; note that by default, changes to templates and properties files do not require a server restart, but the Web Determinations application server can be configured to load and cache them (configuration/application.properties) in which case a restart is required.
Localize the interview
The following steps describe how to localize the interview:
- Locate the web determinations main folder as follows:
Tomcat (Java) – default is the Web Determinations web application in the Tomcat webapps folder; for example:
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\web-determinations\WEB-INF\classes\
IIS (.Net) – default is in:
C:\inetpub\web-determinations\bin\
- Create a new messages.[locale].properties file in the configuration folder, where the [locale] is in the standardized format lang-local, for example, en-GB.
- Repeat the above for appearance.[locale].properties in the properties folder.
- Save the changes; note that by default, changes to templates and properties files do not require a server restart, but the Web Determinations application server can be configured to load and cache them (properties/application.properties) in which case a restart is required.
See also:
Configure appearance of Web Determinations by locale