Customizing FSI Pages mobile

FSI Pages mobile can be customized in different ways to better match your normal FSI Pages instance and Corporate Identity. In contrast to the FSI Skin, some visual aspects of FSI Pages mobile can be changed by means of parameters or by changing CSS classes.

Changing the intro

As of FSI Pages 1.0.5 an intro image will be displayed until the required scripts and images are loaded.
This is comparable to the intro animation and parameter of FSI Viewer. You can change this intro image by editing the file “fsiviewer/applications/pagesmobile/index.html“. The related part is:

<style type="text/css">
      div.startup{
            background-image:url(images/FOO.png);
      }
</style>

Either replace the “images/FOO.png” with a path to your custom image or change the image in the “fsiviewer/applications/pagesmobile/images” folder.

Further editable images

Other images can be changed and/or edited as well, e.g. the menu icons and the search background image, which are also located in the images directory and its related subfolders.

Contrary to the images mentioned above, the two images to display the instructions are located in “/_service/FSI Pages Mobile/instructions/” on your FSI Server.
There are two images to match the possible orientations of the mobile devices.
You can either change these original source images or set a new image path using the related parameters InstructionsImageLandscape and InstructionsImagePortrait in the FSI Pages plug-in node of your .xml configuration file. You can also set these parameter values to FALSE to disable the help screen.

<Plugin src="pages">
      <InstructionsImageLandscape  value="Path/to/landscape_image" />
      <InstructionsImagePortrait  value="Path/to/portrait_image" />
</Plugin>

Window Title and About Window

The window title of the browser window displaying FSI Pages mobile is set in the file at
“fsiviewer/applications/pagesmobile/index.html” using standard HTML.
To change the window title without editing the HTML file, you can also add the MobileWindowTitle parameter.

You can also disable the About window being displayed, by setting the related parameter MobileAboutWindow to false.
Please note: Disabling the about window will work in registered versions only.

<Options>
      <MobileWindowTitle value="Your Title" />
      <MobileAboutWindow  value="false" />
</Options>

 

Other customizations, like changing the background color, can be done by changing the CSS or overwriting certain styles in a custom HTML file. The example below shows how to change the background color.

<style type="text/css">
      html,body {
            background:#FFFF00;
      }
</style>