2_8:kb2800040

KB2800040 Customising the Look and Feel

Applies to: PROJECT in a box 2.8

PIAB Client

Project Templates

The PIAB client can be customised by modifying the templates you use to create projects. Options include:

  • Your own process diagrams
  • Your own process menu structures
  • Using your own file templates
  • Using method-specific colours in the PIAB Client to match the process diagrams.

These templates are stored on the server in the 'template2.0' folder. Please see the 'Method Manager' program for full details.

Client Support Files

The server contains a pack of Client Support Files in the 'piabws\customcontent\clientsupportfiles' folder. These are distributed to each PIAB client on login, and are unpacked to the user's Windows profile. They include:

  • Explorer Images - Icons for files, documents etc. used in the PIAB Client.
  • RAG Images - Status and other flag-type icons (see below).
  • XSL - Reporting templates: XSL stylesheets, images and CSS files (see below).

If these files are changed on the server, then they will normally be distributed automatically to the PIAB client, as well as some being used the hub. In addition, with Admin permissions, clients can make local changes and upload them to the server e.g. to change reporting templates for everyone.

Alternatively, changes to this pack can be simply placed in directly in the server folder.

Reporting Templates

PIAB uses XSL and CSS template to convert project and portfolio XML data into HTML and MHTML reports for display. For the ordinary PIAB user, reporting configuration options are limited to including or excluding blocks of information. For the administrator, there is great flexibility to customise the reporting XSL/CSS to change not only the look and feel, but also the report structures or to post-process results.

Simple customisations e.g. changing colour schemes and logos can be done with minimal knowledge of CSS. More complex customisations e.g. changing report structures requires a knowledge of the XSL language that is beyond the scope of this document. Please contact us if you require help on this topic.

Common Customisations

Item Description
clientsupportfiles\xsl\support\logo.jpg The logo used report headers (350×48).
clientsupportfiles\xsl\support\dashboard.jpg The logo used in the Dashboard Report header (350×48).
clientsupportfiles\xsl\support\report.css The main CSS stylesheet for reporting.
clientsupportfiles\xsl\support\msp.css A CSS stylesheet used to display planning information.
clientsupportfiles\xsl\support\<name>-<value>.png RAG images for e.g. project status icons (see below for details of the naming convention).

Method Picker Spreadsheet

In PIAB client, there is a 'Method Picker' button that opens a spreadsheet showing guidance on which method template to use when creating a new project. This spreadsheet is stored on the server in the 'piabws\etc' folder.

By default the spreadsheet is called 'method-picker.xls'. You can edit this file, or provide your own. If you want to change the name, then you can set the name in the server config file 'piabws.cfg' using the following:

<clientoptions>
  <p2abcmethodpicker>etc/method-picker.xls</p2abcmethodpicker>
</clientoptions>

Enterpise Hub

You can customise the look and feel of the Enterprise Hub to fit with your organisation's schemes: colours, fonts, logos etc. The key elements for content customisation are in the 'piabws\customcontent' folder:

Item Description
Styles.css The default CSS stylesheet.
Styles.nnn.css Alternative stylesheets for specific browsers (see below).
include-default.welcome.inc HTML Content for the welcome message on the Home page.
include-default.client-download.inc HTML Content for the client download panel on the Home page.
include-header.inc HTML Content for the header banner.
include-resources.left.inc HTML Content for the left hand panel of the Resources page.
include-resources.right.inc HTML Content for the right hand panel of the Resources page.
include-mainmenu.config An XML file allowing you to modify the hub main menu.
images A folder containing hub specific customisable images.
rag-images A folder containing e.g. status flag images.
clientsupportfiles A pack of customisable images, report styles etc. for distribution to each PIAB client.

CSS Style Sheet

The CSS style sheet for the application is 'piabws\customcontent\Styles.css'. Some alternative stylesheets are included with the distribution or you may copy/modify the default one. The web application examines the type and version of browser being used to view, and can switch the stylesheet used based on this. The rules are:

  • If there is a specific stylesheet for the current browser type and version, use this;
  • Else if there is a specific stylesheet for the current browser type (regardless of version), then use this;
  • Otherwise, use the default stylesheet 'Styles.css'.

The browser-specific stylesheets are named according to the convention:

Styles.<browser type>_<version>.css

or

Styles.<browser_type>.css

Note that the <version> part is optional. Some browsers report their version as part of browser type, in which case the version part is redundant. An example for IE6 is:

Styles.ie6_6.0.css

or

Styles.ie6.css

You can see the reported browser type and version, and the current stylesheet in use in the Hub's 'About' page.

Hub Images

Various customisable images for different colour schemes are in the 'piabws\customcontent\images' folder. In particular, the home page background and hub logo can be changed.

Image Description
home-page-background.jpg Background Image for the home page (800×600 pixels)
hub-logo.jpg Logo for the hub header (350×40 pixels)
button-background.png Background image for buttons (8×32 pixels) (repeated)
panel1-background.png Background image for the header of panels (8×32 pixels) (repeated)

RAG Images

Status flags and other icons are stored in the 'customcontent\rag-images' folder. Note that the 'clientsupportfiles' contains a similar folder for use in the client. These are normally synchronised with images used by the client, so that the hub and client show the same images. These are named according to the convention:

<name>-<value>.png

Where <name> is the name of a portfolio or project attribute e.g.'status' and <value> is one of the applicable values e.g. 'exception'. For example, the following image would be shown against a project that has its 'status' attribute set to 'exception':

status-exception.png

include-mainmenu.cfg

This XML file allows you to modify and extend the main menu shown in the Enterprise Hub. The options are:

  1. Adding extra items with an associated URL
  2. Changing the names of the menu items e.g. from 'Home' to 'PIAB Home'

Example:

<mainmenu>
  <extraitems>
    <item url="http://myintranet/" name="Intranet Home" target=""/>
  </extraitems>
  <aliases>
    <alias from="Home" to="PIAB Home"/>
  </aliases>
</mainmenu>
2_8/kb2800040.txt · Last modified: 2017/06/22 13:13 (external edit)

Page Tools