Team Elements includes a basic, unbranded layout with a streamlined look. Customizing the appearance involves changing a few files, but can produce great results if the layout is prepared correctly.

After you have installed Team Elements, and before you begin using Team Elements, there are several configuration files that exist in the file library that should be reviewed. These files provide you with additional customization.

Elements to UI Customization

• Layout file (for look/feel)
• CSS file (for look/feel)
• build.properties file (for system setup)
• notification templates (for invite emails)
• settings.xml file (for system settings - hiding UI sections)

Look and Feel (layout, css)

The following steps detail making changes to the look and feel of the application. In the current implementation, the customized files will need to be copied into place each time the application is upgraded. Team Elements uses a script to perform this each time, however we are looking into an automated solution for this.

• Setup a development installation

The easiest way to test your changes is to have a copy of Team Elements installed on your desktop, or on a separate installation on a server.
 

• Make changes to layoutDefault.jsp

The file specifies the position of elements ont he page. An example header is included in the file, but has been commented out. If you want to put your logo on top, then change the image tag to point to a copy of your logo and uncomment the logo section.
 

• Make changes to css/default.css (Cascading Style Sheets)

The file specifies all of the colors and characteristics of the page elements. Make any additional changes to the appearance.
 

• Test the changes

To test the changes, simply refresh your browser. The JSP will recompile, and the CSS file will be used. Verify your changes.

NOTE: All browsers tend to cache the CSS file. You will need to either quit out the browser completely, or force the browser to refresh so that the css file is reloaded.

• Deploy the changes

To deploy the changes to the production server, there are a couple of options:
 

• Incorporate the changed files into the .war file and redeploy the .war.
• If the Servlet Container has exploded the .war, then copy the changed files into the exploded directory.
• The CSS files can be renamed and copied into place, the build.properties file can be modified, and the Team Elements web application reloaded. The browser will see a different CSS to cache. Include the default.css, default-8pt.css, default-10pt.css files.

     TEMPLATE=/layoutDefault.jsp
     CSS=default

Additional information, support, and training can be found at   .

Build Properties

If you look in your file library you will see the the following files and directory structure:

• $FILE_LIBRARY represents the complete path to your file library
• $FILE_LIBRARY/build.properties
• $FILE_LIBRARY/1/templates

The build.properties file contains all of the information that was supplied during the installation process, plus several additional settings.

Each line of the file has a parameter name with a parameter value. Parameters must not be deleted, but can be changed. Restarting the application is required for any changes to take effect.

The following is a list of important parameters and a usage description:

Notification Message Templates (INVITE.MESSAGE; ALERT_NEW_PROJECT.MESSAGE)

Messages can use the following tags in their emails for personalization. The tags will be dynamically replaced when the message is sent.

Settings.xml

The .war includes a basic commented-out settings.xml file.

To use: either make changes directly in the .war, or prefereably perform the following steps:

• Copy the settings.xml into the fileLibrary path
• Make changes as necessary
• Update the build.properties file in the fileLibrary path with the setting:

SETTINGS=settings_copy.xml

• Restart the webapplication

The settings.xml file has parameters that correspond to tags used in the JSPs.

The following have been implemented:

<?xml version="1.0" encoding="UTF-8"?>
<settings>
  <!-- Hidden fields will hide sections of UI when enabled and uncommented -->
  <hiddenFields enabled="true">
    <field name="projects-projectcenter-header" />
    <field name="projects-projectcenter-header-logo" />
    <field name="projects-projectcenter-header-project" />
    <field name="projects-projectcenter-header-project-title" />
    <field name="projects-projectcenter-header-project-badges" />
    <field name="projects-projectcenter-header-role" />
    <field name="projects-projectcenter-header-sizing" />
    <field name="projects-projectcenter-tabs" />
  </hiddenFields>
</settings>

To hide the complete projectcenter header (including the logo, project information, and title), specify:

<field name="projects-projectcenter-header" />

To hide the project center tabs, specify:

<field name="projects-projectcenter-tabs" />