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.
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.
See also
Keyword Search for details on how to configure the search index.
Favicon¶
Favicon (icon seen next to the url of the webapp in the browser url bar) can be set by adding the following line:
<link rel="shortcut icon" type="image/x-icon" href="model/images/favicon.ico">
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 configures the link
project.title
- in Database and Web application configures the name of the mine
project.releaseVersion
- in Database and Web application configures the version of the mine
project.subTitle
- in Database and Web application configures the subtitle showing in the header
header.links
- in Features configures the links in 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:
# web.properties
theme = purple
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.