General Layout
This page describes how to customise the look & feel of the whole InterMine webapp.
Parts#
Logo#
The logo is independent from any themes and is located here MINE_NAME/webapp/src/main/webapp/model/images/logo.png. The recommended size is 45px x 43px.
Menu Tabs#
The tabs are set in InterMine's internationalisation file: intermine/webapp/main/resources/webapp/WEB-INF/classes/InterMineWebApp.properties.
Each page has a name and a tab, for example:
In addition to InterMine's file, each mine has its own internationalisation file: MINE_NAME/webapp/src/main/resources/model.properties. Properties set in this file overwrite the ones set in InterMine's InterMineWebApp.properties. Below is an example of how to add tabs to your mine. Replace "api" with the name of your new tab.
First, copy headMenu.jsp from InterMine to your local mine: MINE_NAME/webapp/src/main/webapp. Then add your new tab:
Then add the text for that tab to your MINE_NAME/webapp/src/main/resources/model.properties file:
You'll need to configure our web framework (Struts) to properly load your JSP page:
Finally, add your JSP file to the MINE_NAME/webapp/src/main/webapp directory and re-release your webapp.
Keyword search box#
This search box queries the search index created in the postprocess create-search-index. To change which placeholder identifiers will appear in the box, edit the quickSearch.identifiers property in Database and Web application.
Note See also Keyword Search for details on how to configure the search index.
Footer#
feedback.destination
in Database and Web application, change the recipient email address for contact form
funding
in Text and messages, change the "funded by" text
project.citation
in Features, change the "cite" text
Favicon#
Favicon (icon seen next to the URL of the webapp in the browser URL bar) can be set by adding the following line into the webapp/resources/webapp/layout.jsp file and its </head> section:
The favicon itself should be located in <your_mine>/webapp/src/main/webapp/model/images/favicon.ico.
If you want to generate a favicon from an image, use this Dynamic Drive tool.
Other properties#
project.sitePrefix
in Database and Web application, configure the link
project.title
in Database and Web application, configure the name of the mine
project.releaseVersion
in Database and Web application, configure the version of the mine
project.subTitle
in Database and Web application, configure the subtitle showing in the header
header.links
in Features, configure the links in the upper right corner
Changing look and feel, the theme#
InterMine provides a set of default themes, but you can also create your own. All themes are defined in /themes directory in InterMine. Explore the folder to see the themes available.
To switch a theme edit Features:
You need to change this property to the name of the theme you want to use (the directory name), then re-release the webapp. Be sure to run ./gradlew clean first to ensure that all of the old files are deleted.
Developing your own theme#
With CSS knowledge and open source image software such as Gimp or Inkscape you can develop your own theme. Each theme directory contains a theme.css file, which is broken down in annotated sections, and image files. The image files are required for displaying menus, headers and backgrounds and can be modified with image software to match your colour scheme. Create a new directory under webapp/src/main/webapp/themes, copy the contents of another theme directory into it and start editing.