Customizing theme images


Theme favicons are located in the img/img/favicons directory inside your theme directory. The favicon URLs are set in the appHead.html template, but it is recommended that you do not override this template in your theme. Instead, name your favicons according to the file names below.


Header images


The default MetacatUI theme shows a rotation of images in the top header. The images are randomly shuffled through with each page load.

Changing the header images

Step 1. Add new images to your theme

These images are located in the img/backgrounds directory inside your theme directory.



Step 2. Update the image count in the navbar template

The navbar.html template contains the HTML element that displays these images. In order for the images to show up correctly, this element needs two components:

  1. The id attribute must equal bg_image.
  2. The data-image-count attribute must equal the number of image files that you added in Step 1. e.g. data-image-count="3"

Removing the header images

Whatever element in MetacatUI that contains the id bg_image (#bg_image) will display these images. Simply remove or rename elements with that id. By default, the navbar.html template contains that element.