GBIF IPT Customization

Customization of the IPT user interface.
For the GBIF GB16 NODES Training Workshop, 2009-10-04

The GBIF IPT (Integrated Publishing Toolkit) can be customized to your needs.
You may want to modify the CSS Style to follow the layout specifications of your organization.
You may also want to add a translation of the user interface for your own language.
Below are a few hints.


Web Icon (favicon.ico)

Log in to your IPT instance
Navigate in the menu to: Admin -> Configuration
  http://localhost:8080/ipt/admin/config.html

From this page you will find an input box named: "Additional raw HTML headers".
In this box add your icon, for example like the following:

<link rel='icon' type='image/vnd.microsoft.icon' href='http://localhost/images/icons/nordgen.ico' />

  or for example

<link rel='icon' type='image/png' href='http://localhost:8080/ipt/images/icons/nordgen.png' />

  and (for Internet Explorer)

<link rel="SHORTCUT ICON" href='http://localhost:8080/ipt/images/icons/nordgen.png'/>

Remember to add your icon image file at the URL you specify here...!

STYLE (CSS)

The GBIF IPT layout style definitions are made using Cascading Style Sheet.
The "theme.css" is starting the show:

 http://localhost:8080/ipt/styles/gbifn/theme.css

 http://localhost:8080/ipt/styles/gbifn/typo.css

 http://localhost:8080/ipt/styles/gbifn/layout.css

 http://localhost:8080/ipt/styles/gbifn/tables.css

 http://localhost:8080/ipt/styles/displaytag.css

 http://localhost:8080/ipt/styles/forms.css

 http://localhost:8080/ipt/styles/gbifn/forms_g.css

 http://localhost:8080/ipt/styles/messages.css

 http://localhost:8080/ipt/styles/gbifn/providertool.css

 http://localhost:8080/ipt/styles/gbifn/providertool2.css

Start for example with editing the file:

 webapps/ipt/styles/gbifn/layout.css

Or make yourself a new theme:

Copy folder:

  webapps/ipt/styles/gbifn/

to

  webapps/ipt/styles/nordgen/

and edit:

  webapps/ipt/styles/nordgen/layout.css

Next, edit:

  webapps/ipt/WEB-INF/web.xml

Around line 20 modify:

  <!-- Define the default CSS Theme -->

  <context-param>

   <param-name>csstheme</param-name>

   <param-value>gbifn</param-value>

  </context-param>

to:

  <!-- Define the default CSS Theme -->

  <context-param>

   <param-name>csstheme</param-name>

   <param-value>nordgen</param-value>

  </context-param>

LANGUAGE, translation of user interface


1. Add a flag for your new language:

  webapps/ipt/images/flags/flag_no.png

  webapps/ipt/images/flags/flag_se.png

2. Activate language select menu in:

  webapps/ipt/common/header.jsp

Around line 25, add (inside switchLocale div, ul block):

  <li><a href="?locale=no"><img src="<c:url value='/images/flags/flag_no.png'/>"/></a></li>

  <li><a href="?locale=se"><img src="<c:url value='/images/flags/flag_se.png'/>"/></a></li>

3. Add translated menu terms for your language:
Menu labels are defined in:

  webapps/ipt/WEB-INF/classes/ApplicationResources_no.properties

  webapps/ipt/WEB-INF/classes/ApplicationResources_se.properties