Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Run the Maven install to deploy your new theme to the Tomcat container. Restart the VIVO Tomcat process. You can then go to the Site Admin page and choose Site Information, to select your theme as the current one.

 Image Added

The structure of pages in VIVO

...

page.ftl is the default base template. The rest of the theme templates listed are components of page.ftl (included either directly or indirectly). Closer inspection of page.ftl reveals a stripped down file that declares minimal markup itself and instead reads as a list of includes for the component templates.

...

.

On the VIVO home page, page-home.ftl is used instead

...

of page.ftl.

...

 It serves much the same purpose, but allows you to create a different layout for your home page than for the other pages in VIVO.

Once the transition is complete in a future VIVO release and all pages are rendered entirely using FreeMarker templates, the restrictions on page.ftl will be lifted and the preference on whether the base template should be broken down into smaller component templates will be left to the theme developer. Until that time, it For consistency, It is critical that the following components be maintained:

...

googleAnalytics.ftl

This component template is primarily intended for the 7 partner institutions on the NIH grant, but it is available for anyone who is interested in using Google Analytics to track visits to a VIVO installation. It is included by footer.ftl. Simply uncomment the <script> element and provide your Google Analytics Tracking Code.

Adjust the markup as necessary in page.ftl, and these component templates to achieve the desired content structure, and modify the stylesheets to meet layout needs and style your site. Remember that changes should be made in the source directory and that you will need to redeploy the project before the changes are reflected in the live website.For more information about VIVO and web analytics, see VIVO Web Analytics.

You can find more information about the structure of the VIVO theme in How VIVO creates a page.

...

Code Block
<!-- an image file -->
<img src="${urls.base}/images/arrowIcon.gif"/>

<!-- a CSS file -->
<link rel="stylesheet" href="${urls.base}/css/login.css" />

<!-- a JavaScript file -->
<script type="text/javascript" src="${urls.base}/js/browserUtils.js"></script>

These refer to files in the vitro-corethe vivo/installer/webapp/web directory, which you can override in the vivo/productMods directory/target/vivo directory. If you look, you will see that vivo/productMods already contains some files that override those in vitro/webapp/web. This is because VIVO itself is a customization of Vitro.Image Removedthat this directory contains some files also used in the construction of thr VIVO interface.

Override Freemarker templates that are not in the theme directory

Like adding templates, overriding templates is simplified. You can override a file in vitro-core/webapp/web/templates/freemarker, or one of its sub-directories, by creating a file with the same name and path under vivo/productMods/templates/freemarker.

Image Removed

To override templates not in the theme directory, simply modify freemarker templates in vivo/installer/webapp/target/vivo.  These changes will apply to all your themes.

But VIVO treats all available Freemarker templates as belonging to the same flat namespace, whether they are in the theme directory or in the templates/freemarker directory, or one of its sub-directories. So a file named vitro-coreA file in vivo/installer/webapp/web/templates/freemarker/page/partials/footer.ftl can target/vivo can be overridden by a file called footer.ftl in corresponding file in the theme directory.And it is.

Working on the theme

When you make changes to VIVO, you should make the changes in your VIVO distribution directory, run the build scriptMaven install, restart Tomcat, and test the changes. If you are doing full customizing of VIVO, this cycle might be best.

If you are only working on the theme, you can speed things up.

  • Tell the build script to skip the unit tests: they don't test the theme.
    • ant deploy mvn install -Dskiptests=true
  • Don't restart Tomcat.
    • VIVO always serves the most recent version of CSS files, image files, and JavaScript files. You don't need to restart Tomcat to make that happen.
    • However, your browser may cache these files so you won't see the most recent version. Here are some suggestions for bypassing your browser cache.
  • Tell VIVO to reload Freemarker templates each time they are requested.
  • By default, VIVO will wait one minute before checking for a change in a Freemarker template.
  • In VIVO 1.5.2 or before, add this to deploy.properties: Environment.build=development
  • In VIVO 1.6, add this to build.properties: developer.defeatFreemarkerCache=true
  • In VIVO 1.6.1 or later, use The Developer Panel to defeat the Freemarker cache.
  • This is not a good idea for your production VIVO instance - only for developing your theme See Tips for Interface Developers.

Some developers prefer to make theme changes inside the tomcat/webapp/vivo directory. This eliminates the need to run the build script, but opens the threat of having the changes over-written the next time the build script runs.

When to restart Tomcat

If you make changes to any of the runtime.properties or to any of the RDF files in your VIVO home directory, you must restart Tomcat in order to see the effect of the changes.

...

to

...

restart Tomcat

...

If you make changes to any of the source files in the theme, including images, CSS, JavaScript or Freemarker templates, you must run the build script, but you do not need to restart Tomcat.

...