Metacat

The default theme can be used out-of-box. To make simple edits such as change the logo in the header or footer, add links to the navigation, etc., we will need to create a new theme, make our changes to the header and footer HTML templates, but borrow all other templates from the default theme so we don't have to create everything from scratch.

1. **Create a new theme:** Duplicate the ``js/themes/default`` directory and rename it to a unique theme name with no spaces.

2. **Add your logo:** In the ``js/themes/<yourtheme>/img`` directory, add the following image files:

3. **Customize the header and footer:** Create a ``templates`` directory in ``js/themes/<yourtheme>`` and copy the following files from ``js/templates`` into

3a. Open the ``js/themes/<yourtheme>/templates/footer.html`` file and change the footer logo image paths and the link paths to direct to 

	  <a href="http://nceas.ucsb.edu" target="_blank">

	  	<img alt="NCEAS" src="./js/themes/yourtheme/img/nceas-logo-white.png">

	  </a>

	You can add or modify any of the HTML in the footer; we are using the logo only as a simple demonstration.

3b. Similarly, open the ``js/themes/<yourtheme>/templates/navbar.html`` file and replace the Metacat logo file with your organization's logo file. You can also add more links to this header navigation.

4. **Create your theme map:** By default, Metacat will use the default theme templates unless you specifically tell Metacat to override these with the template files in your custom theme.

In the ``js/themes/<yourtheme>/config.js`` file, change the theme name on line 1, ``default``, to your chosen new theme name.

In the ``themeMap``, add a new line for every template you have edited and added to your new theme. An example for the footer.html and navbar.html files is below.

  ::

	var theme = theme || "default";

	var themeMap = 

	{

		'*': {

			// example overrides are provided here

			'templates/navbar.html' : 'themes/' + theme + '/templates/navbar.html',

			'templates/footer.html' : 'themes/' + theme + '/templates/footer.html'

			}

	};

5. Repeat step 3-4 as necessary for any other template files you edit.

6. **Specify your theme and metacat context** Open ``index.html``. Edit the following line to specify your theme name (attribute ``data-theme``) and your Metacat

   context (attribute ``data-metacat-context``):

a new theme and telling Metacat to override the default files with the ones in your custom theme.

1. **Create a new theme:** Copy an existing theme directory structure, found in ``js/themes``, and rename that directory after your new theme.

2. **Style your theme** Add a CSS file to your theme by creating a CSS file in the ``js/themes/<yourtheme>/css/`` directory

3. **Add images** Add your custom images to the ``js/themes/<yourtheme>/img`` directory.

4. **Edit templates** Add HTML templates to the ``js/themes/<yourtheme>/templates`` directory.

5. **Create your theme map** Open the ``js/themes/<yourtheme>/config.js`` file. In here you will define your theme and themeMap. By default, Metacat will use the default theme templates unless you specifically tell Metacat to override these with the template files in your custom theme.

Change the theme name on line 1, ``default``, to your chosen new theme name. Then follow the commented out examples in ``themeMap`` to

explicitly tell Metacat which default shared files should be overridden with your custom theme 

*Note: You do not have to override the CSS or image files.*

7. **Specify your theme and metacat context** Open ``index.html``. Edit the following line to specify your theme name (attribute ``data-theme``) and your Metacat

context (attribute ``data-metacat-context``):

theme. To have the same background image on all views, change this value to 1. To not use the background image at all, simply remove this ``<img>`` element.

Store your custom background image files in ``js/themes/<yourtheme>/img/backgrounds``. Keep the naming convention of ``bg1.jpg``, ``bg2.jpg``, etc., making sure

that all numbers from 1 to your specified total (``data-image-count``) are included. (i.e. do not skip any numbers, such as ``bg1.jpg``, ``bg3.jpg`` ...)

Advanced users can choose to override the JavaScript files for even more customization of MetacatUI.

				'' 					        : 'routeToData',    // route ROOT to data

				'about'                     : 'renderAbout', 

				'about(/:anchorId)'         : 'renderAbout',  

				'plans'                     : 'renderPlans',  

				'tools(/:anchorId)'         : 'renderTools',  

				'data(/search/:searchTerm)(/page/:page)' : 'renderData',    

				'view/*pid'                 : 'renderMetadata',    

				'external(/*url)'           : 'renderExternal',   

				'logout'                    : 'logout',    

				'signup'          			: 'renderLdap',  

				'account(/:stage)'          : 'renderLdap',   

				'share'                     : 'renderRegistry'   

	**Note: Remember to include any views or routers in your list of overrides in js/themes/<yourtheme>/config.js