General Method

1. Request and obtain the necessary information from the client

2. Create a new instance of VIVO

3. Create a theme named for the client in the client’s VIVO instance.  Set the theme as the default in Site Information

4. Use Site Admin -> Site Information to provide additional site information

5. Copy the custom footer to the client’s theme.  The custom footer is attached to this page.  See the link in the instructions below.

6. Edit the footer to supply the client’s contact email address for support

7. Copy the custom style sheet to the client’s theme.   The custom stylesheet is attached to this page.  See the link in the instructions below.

8. Modify the style sheet with the client’s colors and logo

9. Build VIVO, restart Tomcat, verify theming

10. Archive footer and style sheet when theming is complete

Request Information from the Client

The following information is needed for theming:

1. Logo.  Preferably with transparent background and either scalable or 59px high.  If the client provides a scalable image, use image software to construct a logo 59px high.  If the client supplies a logo in a non-scalable format, use high-quality image software to scale the logo to 59px high.

2. Colors.  Two RGB hex code colors.  Preferably one lighter, for use as a background/border color, and one darker for use as a headings color

3. Site Name.  Such as “Scholars@MyOrg” or “Experts@MyOrg” or “VIVO” or “VIVO@MyOrg”. 50 characters max.

4. Contact email address.

5. Copyright text to appear after a copyright symbol in the VIVO footer.  Typically the organization’s name spelled out. Such as “Cambridge University”

6. Copyright URL.  A URL that will be visited when the user clicks on the copyright link in the footer.  Can be the organization’s home page URL

Create a New instance and a theme named for the client

See VIVO 1.10 Documentation -- Installing VIVO and VIVO 1.10 Documentation - Simple Theming - Create a Theme

Add the Site Information

Visit Site Admin -> Site Information as a system admin on the client’s VIVO.  Fill in the form and press Save changes.

Copy the custom footer to the client’s theme

Copy the custom footer to vivo/installer/webapp/target/vivo/themes/client-theme-name/templates/footer.ftl

Edit the footer to supply the client’s contact email address

Note: The contact email address is used twice.  Once in Site Information (see above) and once here in footer.ftl

Edit footer.ftl.  Replace “info@apo.org.au” with the client’s contact email address.

Copy the custom stylesheet to the client’s theme

Copy the custom stylesheet to vivo/installer/webapp/target/vivo/themes/client-theme-name/css/wilma.css

Note:  the stylesheet is always called wilma.css, regardless of the name of the client’s theme.  In VIVO 1.10, templates ignore the theme name, but find the style sheet by the name wilma.css in the theme’s css folder.

Modify the client’s style sheet with the client’s colors and logo

1. Copy the client’s logo to the client’s theme directory, images sub folder

2. In wilma.css, find and replace APO-LOGO-SMALL.png with the client’s logo file name

3. Find and replace all #EFEBE2 to the client’s background/border color

4. Find and replace all all #076D8B to the client’s headings color

5. Save the changes as wilma.css in the client’s theme css sub folder

Build VIVO, restart Tomcat, verify changes

Build VIVO using mvn install (not mvn clean install which would remove the custom theming). Restart tomcat.

Verify the changes:

1. Is the site info correct?

2. Is the logo correct at the top of pages?

3. Is the client’s light color in place for the page background/border?

4. Are the headings the client’s headings color?

5. Does the footer contain the client’s info?

If the answer to any of the questions is no, repeat the step in which the information was supplied to VIVO.

When all the answers are yes, theming is complete.