<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>9. Modifying and Creating Themes — Metacat 2.19.0 documentation</title>
<link rel="stylesheet" href="_static/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="_static/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="_static/metacatui.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '2.19.0',
COLLAPSE_MODINDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="top" title="Metacat 2.19.0 documentation" href="index.html" />
<link rel="prev" title="8. Metacat Indexing" href="query-index.html" />
<link rel="next" title="10. Metacat Authentication Mechanism" href="authinterface.html" />
</head>
<body>
<div id="metacatDocs">
<div class="banner">
<a href="index.html"><img class="logo" src="_static/metacat-logo-white.png" /></a>
<a href="index.html"><h1 class="title">Metacat: Metadata and Data Management Server</h1></a>
<img class="logo-right" src="_static/nceas-logo-white.png" />
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right">
<span id="searchbox" style="display: none;">
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" class="icon-search"/>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</span>
</li>
<script type="text/javascript">$('#searchbox').show(0);</script>
<li class="right">
<a href="genindex.html" title="General Index"
accesskey="I">index</a>
</li>
<li class="right">
<a href="authinterface.html" title="10. Metacat Authentication Mechanism"
accesskey="N">next</a>
</li>
<li class="right">
<a href="query-index.html" title="8. Metacat Indexing"
accesskey="P">previous</a>
</li>
<li class="breadcrumb first"><a href="index.html">Metacat 2.19.0 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="modifying-and-creating-themes">
<h1><a class="toc-backref" href="#id2">9. Modifying and Creating Themes</a><a class="headerlink" href="#modifying-and-creating-themes" title="Permalink to this headline">¶</a></h1>
<div class="versionadded">
<p><span class="versionmodified">New in version 2.2.0.</span></p>
</div>
<div class="contents topic" id="contents">
<p class="topic-title first">Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#modifying-and-creating-themes" id="id2">Modifying and Creating Themes</a><ul>
<li><a class="reference internal" href="#quick-start-using-the-default-theme" id="id3">Quick Start Using the Default Theme</a></li>
<li><a class="reference internal" href="#creating-a-custom-theme" id="id4">Creating a Custom Theme</a><ul>
<li><a class="reference internal" href="#changing-the-background-images-on-the-default-theme" id="id5">Changing the background images on the default theme</a></li>
<li><a class="reference internal" href="#advanced-options-for-custom-themes" id="id6">Advanced options for custom themes</a></li>
</ul>
</li>
<li><a class="reference internal" href="#using-custom-endpoints" id="id7">Using Custom Endpoints</a></li>
<li><a class="reference internal" href="#creating-a-custom-skin" id="id8">Creating a Custom Skin</a></li>
</ul>
</li>
</ul>
</div>
<p>Metacat’s theming system, <a class="reference external" href="https://github.com/NCEAS/metacatui">MetacatUI</a>, is deployed separately from Metacat, allowing more
independent user interface customization. Check the <a class="reference external" href="https://github.com/NCEAS/metacatui">MetacatUI GitHub</a> for the most up to date version.</p>
<p>MetacatUI is structured in a model-view-controller
architecture using <a class="reference external" href="http://www.backbonejs.org">Backbone.js</a>. Some background knowledge on Backbone.js may be helpful for
advanced modification of MetacatUI, but is not necessary for editing the CSS styling and HTML of
the included MetacatUI views.</p>
<div class="figure" id="id1">
<img alt="_images/image007.png" src="_images/image007.png" />
<p class="caption"><span class="caption-text">MetacatUI’s default home page. Users can customize the appearance using themes.</span></p>
</div>
<div class="section" id="quick-start-using-the-default-theme">
<h2><a class="toc-backref" href="#id3">9.1. Quick Start Using the Default Theme</a><a class="headerlink" href="#quick-start-using-the-default-theme" title="Permalink to this headline">¶</a></h2>
<p>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.</p>
<ol class="arabic">
<li><p class="first"><strong>Create a new theme:</strong> Duplicate the <code class="docutils literal"><span class="pre">js/themes/default</span></code> directory and rename it to a unique theme name with no spaces.</p>
</li>
<li><p class="first"><strong>Add your logo:</strong> In the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/img</span></code> directory, add the following image files:</p>
<blockquote>
<div><ul class="simple">
<li>Your organization’s logo</li>
<li>Any supporter or donor logos to use in the footer</li>
</ul>
</div></blockquote>
</li>
</ol>
<p>3. <strong>Customize the header and footer:</strong> Create a <code class="docutils literal"><span class="pre">templates</span></code> directory in <code class="docutils literal"><span class="pre">js/themes/<yourtheme></span></code> and copy the following files from <code class="docutils literal"><span class="pre">js/templates</span></code> into
that new directory:</p>
<blockquote>
<div><ul class="simple">
<li>footer.html</li>
<li>navbar.html</li>
</ul>
</div></blockquote>
<p>3a. Open the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/templates/footer.html</span></code> file and change the footer logo image paths and the link paths to direct to
your new footer images and their corresponding web addresses. For example,</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s2">"http://nceas.ucsb.edu"</span> <span class="n">target</span><span class="o">=</span><span class="s2">"_blank"</span><span class="o">></span>
<span class="o"><</span><span class="n">img</span> <span class="n">alt</span><span class="o">=</span><span class="s2">"NCEAS"</span> <span class="n">src</span><span class="o">=</span><span class="s2">"./js/themes/yourtheme/img/nceas-logo-white.png"</span><span class="o">></span>
<span class="o"></</span><span class="n">a</span><span class="o">></span>
</pre></div>
</div>
<p>You can add or modify any of the HTML in the footer; we are using the logo only as a simple demonstration.</p>
</div></blockquote>
<p>3b. Similarly, open the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/templates/navbar.html</span></code> file and replace the Metacat logo file with your organization’s logo file. You can also add more links to this header navigation.</p>
<p>4. <strong>Create your theme map:</strong> 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 <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/config.js</span></code> file, change the theme name on line 1, <code class="docutils literal"><span class="pre">default</span></code>, to your chosen new theme name.
In the <code class="docutils literal"><span class="pre">themeMap</span></code>, 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.</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">theme</span> <span class="o">=</span> <span class="n">theme</span> <span class="o">||</span> <span class="s2">"default"</span><span class="p">;</span>
<span class="n">var</span> <span class="n">themeMap</span> <span class="o">=</span>
<span class="p">{</span>
<span class="s1">'*'</span><span class="p">:</span> <span class="p">{</span>
<span class="o">//</span> <span class="n">example</span> <span class="n">overrides</span> <span class="n">are</span> <span class="n">provided</span> <span class="n">here</span>
<span class="s1">'templates/navbar.html'</span> <span class="p">:</span> <span class="s1">'themes/'</span> <span class="o">+</span> <span class="n">theme</span> <span class="o">+</span> <span class="s1">'/templates/navbar.html'</span><span class="p">,</span>
<span class="s1">'templates/footer.html'</span> <span class="p">:</span> <span class="s1">'themes/'</span> <span class="o">+</span> <span class="n">theme</span> <span class="o">+</span> <span class="s1">'/templates/footer.html'</span>
<span class="p">}</span>
<span class="p">};</span>
</pre></div>
</div>
</div></blockquote>
<ol class="arabic simple" start="5">
<li>Repeat step 3-4 as necessary for any other template files you edit.</li>
</ol>
<ol class="arabic simple" start="7">
<li>Open <code class="docutils literal"><span class="pre">index.html</span></code>. Edit the following line to reflect your theme name (<code class="docutils literal"><span class="pre">data-theme</span></code>) and your Metacat
context (<code class="docutils literal"><span class="pre">data-metacat-context</span></code>). (The Metacat context is the name of the directory in which Metacat is installed in the Tomcat web-application directory (most likely “metacatâ€). Whomever installed Metacat will know what this directory is called. If your MetacatUI is already successfully retrieving datasets during searches, this is already set and can be left as is.)</li>
</ol>
<ol class="arabic" start="6">
<li><p class="first"><strong>Specify your theme and metacat context</strong> Open <code class="docutils literal"><span class="pre">index.html</span></code>. Edit the following line to specify your theme name (attribute <code class="docutils literal"><span class="pre">data-theme</span></code>) and your Metacat
context (attribute <code class="docutils literal"><span class="pre">data-metacat-context</span></code>) (The Metacat context is the name of the directory in which Metacat is installed in the Tomcat web-application directory (most likely “metacatâ€). Whomever installed Metacat will know what this directory is called. If your MetacatUI is already successfully retrieving datasets during searches, this is already set and can be left as is.)</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">script</span> <span class="n">data</span><span class="o">-</span><span class="n">theme</span><span class="o">=</span><span class="s2">"default"</span> <span class="n">data</span><span class="o">-</span><span class="n">metacat</span><span class="o">-</span><span class="n">context</span><span class="o">=</span><span class="s2">"metacat"</span> <span class="nb">id</span><span class="o">=</span><span class="s2">"loader"</span> <span class="nb">type</span><span class="o">=</span><span class="s2">"text/javascript"</span> <span class="n">src</span><span class="o">=</span><span class="s2">"loader.js"</span><span class="o">></</span><span class="n">script</span><span class="o">></span>
</pre></div>
</div>
</div></blockquote>
</li>
</ol>
</div>
<div class="section" id="creating-a-custom-theme">
<h2><a class="toc-backref" href="#id4">9.2. Creating a Custom Theme</a><a class="headerlink" href="#creating-a-custom-theme" title="Permalink to this headline">¶</a></h2>
<p>All themes share the same CSS, HTML, JavaScript and image files. Any of these files can be customized by creating
a new theme and telling Metacat to override the default files with the ones in your custom theme.</p>
<p>1. <strong>Create a new theme:</strong> Copy an existing theme directory structure, found in <code class="docutils literal"><span class="pre">js/themes</span></code>, and rename that directory after your new theme.
Notice that each theme directory looks something like this:</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">css</span><span class="o">/</span>
<span class="n">img</span><span class="o">/</span>
<span class="n">routers</span><span class="o">/</span>
<span class="n">templates</span><span class="o">/</span>
<span class="n">config</span><span class="o">.</span><span class="n">js</span>
</pre></div>
</div>
</div></blockquote>
<ol class="arabic simple" start="2">
<li><strong>Style your theme</strong> Add a CSS file to your theme by creating a CSS file in the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/css/</span></code> directory
named <code class="docutils literal"><span class="pre">metacatui.css</span></code></li>
<li><strong>Add images</strong> Add your custom images to the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/img</span></code> directory.</li>
<li><strong>Edit templates</strong> Add HTML templates to the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/templates</span></code> directory.</li>
<li><strong>Create your theme map</strong> Open the <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/config.js</span></code> 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.</li>
</ol>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">theme</span> <span class="o">=</span> <span class="n">theme</span> <span class="o">||</span> <span class="s2">"default"</span><span class="p">;</span>
<span class="n">var</span> <span class="n">themeMap</span> <span class="o">=</span>
<span class="p">{</span>
<span class="s1">'*'</span><span class="p">:</span> <span class="p">{</span>
<span class="o">//</span> <span class="n">example</span> <span class="n">overrides</span> <span class="n">are</span> <span class="n">provided</span> <span class="n">here</span>
<span class="o">//</span><span class="s1">'views/AboutView'</span> <span class="p">:</span> <span class="s1">'themes/'</span> <span class="o">+</span> <span class="n">theme</span> <span class="o">+</span> <span class="s1">'/views/AboutView.js'</span><span class="p">,</span>
<span class="o">//</span><span class="s1">'templates/navbar.html'</span> <span class="p">:</span> <span class="s1">'themes/'</span> <span class="o">+</span> <span class="n">theme</span> <span class="o">+</span> <span class="s1">'/templates/navbar.html'</span>
<span class="p">}</span>
<span class="p">};</span>
</pre></div>
</div>
</div></blockquote>
<p>Change the theme name on line 1, <code class="docutils literal"><span class="pre">default</span></code>, to your chosen new theme name. Then follow the commented out examples in <code class="docutils literal"><span class="pre">themeMap</span></code> to
explicitly tell Metacat which default shared files should be overridden with your custom theme
files. The pattern is:</p>
<blockquote>
<div><code class="docutils literal"><span class="pre">path/originalFile.html</span> <span class="pre">:</span> <span class="pre">'themes/'</span> <span class="pre">+</span> <span class="pre">theme</span> <span class="pre">+</span> <span class="pre">'/path/newFile.html'</span></code></div></blockquote>
<p><em>Note: You do not have to override the CSS or image files.</em></p>
<p>7. <strong>Specify your theme and metacat context</strong> Open <code class="docutils literal"><span class="pre">index.html</span></code>. Edit the following line to specify your theme name (attribute <code class="docutils literal"><span class="pre">data-theme</span></code>) and your Metacat
context (attribute <code class="docutils literal"><span class="pre">data-metacat-context</span></code>):</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">script</span> <span class="n">data</span><span class="o">-</span><span class="n">theme</span><span class="o">=</span><span class="s2">"default"</span> <span class="n">data</span><span class="o">-</span><span class="n">metacat</span><span class="o">-</span><span class="n">context</span><span class="o">=</span><span class="s2">"metacat"</span> <span class="nb">id</span><span class="o">=</span><span class="s2">"loader"</span> <span class="nb">type</span><span class="o">=</span><span class="s2">"text/javascript"</span> <span class="n">src</span><span class="o">=</span><span class="s2">"loader.js"</span><span class="o">></</span><span class="n">script</span><span class="o">></span>
</pre></div>
</div>
</div></blockquote>
<div class="section" id="changing-the-background-images-on-the-default-theme">
<h3><a class="toc-backref" href="#id5">9.2.1. Changing the background images on the default theme</a><a class="headerlink" href="#changing-the-background-images-on-the-default-theme" title="Permalink to this headline">¶</a></h3>
<p>The <code class="docutils literal"><span class="pre">js/templates/app.html</span></code> file contains the <code class="docutils literal"><span class="pre"><img></span></code> element for the background image:</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">img</span> <span class="n">src</span><span class="o">=</span><span class="s2">""</span> <span class="n">class</span><span class="o">=</span><span class="s2">"bg"</span> <span class="nb">id</span><span class="o">=</span><span class="s2">"bg_image"</span> <span class="n">data</span><span class="o">-</span><span class="n">image</span><span class="o">-</span><span class="n">count</span><span class="o">=</span><span class="s2">"9"</span> <span class="o">/></span>
</pre></div>
</div>
</div></blockquote>
<p>Change the <code class="docutils literal"><span class="pre">data-image-count</span></code> attribute to the number of images you would like to cycle through in your custom
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 <code class="docutils literal"><span class="pre"><img></span></code> element.</p>
<p>Store your custom background image files in <code class="docutils literal"><span class="pre">js/themes/<yourtheme>/img/backgrounds</span></code>. Keep the naming convention of <code class="docutils literal"><span class="pre">bg1.jpg</span></code>, <code class="docutils literal"><span class="pre">bg2.jpg</span></code>, etc., making sure
that all numbers from 1 to your specified total (<code class="docutils literal"><span class="pre">data-image-count</span></code>) are included. (i.e. do not skip any numbers, such as <code class="docutils literal"><span class="pre">bg1.jpg</span></code>, <code class="docutils literal"><span class="pre">bg3.jpg</span></code> …)</p>
</div>
<div class="section" id="advanced-options-for-custom-themes">
<h3><a class="toc-backref" href="#id6">9.2.2. Advanced options for custom themes</a><a class="headerlink" href="#advanced-options-for-custom-themes" title="Permalink to this headline">¶</a></h3>
<p>Advanced users can choose to override the JavaScript files for even more customization of MetacatUI.</p>
<p>The <code class="docutils literal"><span class="pre">router.js</span></code> file can be modified to render different views based on the URL. For example,
a theme which has no home page and routes users to the <code class="docutils literal"><span class="pre">DataCatalogView</span></code> view instead, would modify <code class="docutils literal"><span class="pre">router.js</span></code>
like so:</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o">//</span> <span class="n">MetacatUI</span> <span class="n">Router</span>
<span class="o">//</span> <span class="o">----------------</span>
<span class="n">var</span> <span class="n">UIRouter</span> <span class="o">=</span> <span class="n">Backbone</span><span class="o">.</span><span class="n">Router</span><span class="o">.</span><span class="n">extend</span><span class="p">({</span>
<span class="n">routes</span><span class="p">:</span> <span class="p">{</span>
<span class="s1">''</span> <span class="p">:</span> <span class="s1">'routeToData'</span><span class="p">,</span> <span class="o">//</span> <span class="n">route</span> <span class="n">ROOT</span> <span class="n">to</span> <span class="n">data</span>
<span class="s1">'about'</span> <span class="p">:</span> <span class="s1">'renderAbout'</span><span class="p">,</span>
<span class="s1">'about(/:anchorId)'</span> <span class="p">:</span> <span class="s1">'renderAbout'</span><span class="p">,</span>
<span class="s1">'plans'</span> <span class="p">:</span> <span class="s1">'renderPlans'</span><span class="p">,</span>
<span class="s1">'tools(/:anchorId)'</span> <span class="p">:</span> <span class="s1">'renderTools'</span><span class="p">,</span>
<span class="s1">'data(/search/:searchTerm)(/page/:page)'</span> <span class="p">:</span> <span class="s1">'renderData'</span><span class="p">,</span>
<span class="s1">'view/*pid'</span> <span class="p">:</span> <span class="s1">'renderMetadata'</span><span class="p">,</span>
<span class="s1">'external(/*url)'</span> <span class="p">:</span> <span class="s1">'renderExternal'</span><span class="p">,</span>
<span class="s1">'logout'</span> <span class="p">:</span> <span class="s1">'logout'</span><span class="p">,</span>
<span class="s1">'signup'</span> <span class="p">:</span> <span class="s1">'renderLdap'</span><span class="p">,</span>
<span class="s1">'account(/:stage)'</span> <span class="p">:</span> <span class="s1">'renderLdap'</span><span class="p">,</span>
<span class="s1">'share'</span> <span class="p">:</span> <span class="s1">'renderRegistry'</span>
<span class="p">},</span>
</pre></div>
</div>
</div></blockquote>
<p>In this example, the index path, <code class="docutils literal"><span class="pre">''</span></code>, was changed from
the value <code class="docutils literal"><span class="pre">renderIndex</span></code> which renders the <code class="docutils literal"><span class="pre">IndexView.js</span></code> view, to <code class="docutils literal"><span class="pre">routeToData</span></code> which reroutes to <code class="docutils literal"><span class="pre">data</span></code>,
in turn rendering the <code class="docutils literal"><span class="pre">DataCatalogView</span></code> view.</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">routeToData</span><span class="p">:</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="n">console</span><span class="o">.</span><span class="n">log</span><span class="p">(</span><span class="s1">'Called UIRouter.routeToData()'</span><span class="p">);</span>
<span class="n">this</span><span class="o">.</span><span class="n">navigate</span><span class="p">(</span><span class="s2">"data"</span><span class="p">,</span> <span class="p">{</span><span class="n">trigger</span><span class="p">:</span> <span class="n">true</span><span class="p">});</span>
<span class="p">},</span>
</pre></div>
</div>
<p><strong>Note: Remember to include any views or routers in your list of overrides in js/themes/<yourtheme>/config.js
for each file you modify</strong></p>
</div></blockquote>
<p>For more information about <code class="docutils literal"><span class="pre">Backbone.js</span></code>, see the Backbone.js documentation at <a class="reference external" href="http://www.backbonejs.org">www.backbonejs.org</a></p>
</div>
</div>
<div class="section" id="using-custom-endpoints">
<h2><a class="toc-backref" href="#id7">9.3. Using Custom Endpoints</a><a class="headerlink" href="#using-custom-endpoints" title="Permalink to this headline">¶</a></h2>
<p>MetacatUI can also be configured to use custom DataONE endpoints for both Member Node and Coordinating Node APIs.
The <code class="docutils literal"><span class="pre">dataone</span></code> theme shows an example of this endpoint customization in the <code class="docutils literal"><span class="pre">AppModel.js</span></code> file.
In custom themes, the AppModel.js values can be edited to suit your particular deployment needs.</p>
<p>For querying the DataONE Coordinating Node, for example, the following properties would be set:</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">context</span><span class="p">:</span> <span class="s1">''</span><span class="p">,</span>
<span class="n">d1Service</span><span class="p">:</span> <span class="s2">"/cn/v2"</span><span class="p">,</span>
<span class="n">d1CNBaseUrl</span><span class="p">:</span> <span class="s2">"https://cn.dataone.org"</span><span class="p">,</span>
<span class="n">d1CNService</span><span class="p">:</span> <span class="s2">"/cn/v2"</span><span class="p">,</span>
</pre></div>
</div>
</div></blockquote>
<p>But querying a Metacat Member Node would be configured as:</p>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">context</span><span class="p">:</span> <span class="s1">'/metacat'</span><span class="p">,</span>
<span class="n">d1Service</span><span class="p">:</span> <span class="s1">'/d1/mn/v2'</span><span class="p">,</span>
<span class="n">d1CNBaseUrl</span><span class="p">:</span> <span class="s2">"https://cn.dataone.org/"</span><span class="p">,</span>
<span class="n">d1CNService</span><span class="p">:</span> <span class="s2">"cn/v2"</span><span class="p">,</span>
</pre></div>
</div>
</div></blockquote>
</div>
<div class="section" id="creating-a-custom-skin">
<h2><a class="toc-backref" href="#id8">9.4. Creating a Custom Skin</a><a class="headerlink" href="#creating-a-custom-skin" title="Permalink to this headline">¶</a></h2>
<div class="deprecated">
<p><span class="versionmodified">Deprecated since version 2.2.0: </span>Use MetacatUI themes for any new UI development. Metacat’s original skinning
mechanism is still included and used for aspects of rendering metadata, but is
not the preferred method for building web clients for Metacat.</p>
<p>To MetacatUI themes, select <code class="docutils literal"><span class="pre">metacatui</span></code> as the default skin during skin configuration
in the administration interface.</p>
</div>
<p>Skins are used in Metacat to customize the appearance of the search and display
web interface that is presented by Metacat. Skins can be used to make a Metacat
instance exactly integrate into an existing web site, and are fully customizable.</p>
<p>To create and customize your own Metacat skin, you must first create a skin
directory. This is most easily accomplished by copying one of the existing skin
directories. Step-by-step directions for creating and installing a custom skin
are included below:</p>
<ol class="arabic simple">
<li>Copy an existing skin directory. We recommend using the “default†directory.</li>
</ol>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">sudo</span> <span class="n">cp</span> <span class="o">-</span><span class="n">r</span> <span class="o"><</span><span class="n">CONTEXT_DIR</span><span class="o">>/</span><span class="n">style</span><span class="o">/</span><span class="n">skins</span><span class="o">/</span><span class="n">default</span><span class="o">/</span> <span class="o"><</span><span class="n">CONTEXT_DIR</span><span class="o">>/</span><span class="n">style</span><span class="o">/</span><span class="n">skins</span><span class="o">/</span><span class="p">[</span><span class="n">yourSkin</span><span class="p">]</span><span class="o">/</span>
</pre></div>
</div>
<p>Where <code class="docutils literal"><span class="pre"><CONTEXT_DIR></span></code> is the directory in which the Metacat application
code lives and <code class="docutils literal"><span class="pre">[yourSkin]</span></code> is the name you wish to apply to your skin.</p>
</div></blockquote>
<ol class="arabic simple" start="2">
<li>In <code class="docutils literal"><span class="pre">[yourSkin]</span></code> directory, change all files named <code class="docutils literal"><span class="pre">default.xxx</span></code> to
<code class="docutils literal"><span class="pre">yourSkin.xxx</span></code>. The following files should be changed:</li>
</ol>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">default</span><span class="o">.</span><span class="n">css</span>
<span class="n">default</span><span class="o">.</span><span class="n">js</span>
<span class="n">default</span><span class="o">.</span><span class="n">properties</span>
<span class="n">default</span><span class="o">.</span><span class="n">properties</span><span class="o">.</span><span class="n">metadata</span><span class="o">.</span><span class="n">xml</span>
<span class="n">default</span><span class="o">.</span><span class="n">xml</span>
</pre></div>
</div>
</div></blockquote>
<ol class="arabic simple" start="3">
<li>In the metacat.properties file(<code class="docutils literal"><span class="pre"><CONTEXT_DIR>/WEB_INF/metacat.properties</span></code>),
add <code class="docutils literal"><span class="pre">[yourSkin]</span></code> to the value of the skin.names property.</li>
<li>Restart Tomcat. Log in as the user that runs your Tomcat server (often “tomcatâ€) and type:</li>
</ol>
<blockquote>
<div><div class="highlight-default"><div class="highlight"><pre><span></span><span class="o">/</span><span class="n">etc</span><span class="o">/</span><span class="n">init</span><span class="o">.</span><span class="n">d</span><span class="o">/</span><span class="n">tomcat7</span> <span class="n">restart</span>
</pre></div>
</div>
</div></blockquote>
<p>Navigate to Metacat’s Configuration utility and select the Configure Skins
option. Your custom skin should appear as a choice in the skins list. Change
the layout and style by modifying the header, footer, css, and other files in
your new skin directory.</p>
<p>It is important to note that all customized skins will be overwritten when
Metacat is reinstalled or upgraded. Please remember to back up your skins before
reinstalling or upgrading Metacat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
<div class="footerNav">
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right">
<span id="searchbox" style="display: none;">
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" class="icon-search"/>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</span>
</li>
<script type="text/javascript">$('#searchbox').show(0);</script>
<li class="right">
<a href="genindex.html" title="General Index"
>index</a>
</li>
<li class="right">
<a href="authinterface.html" title="10. Metacat Authentication Mechanism"
>next</a>
</li>
<li class="right">
<a href="query-index.html" title="8. Metacat Indexing"
>previous</a>
</li>
<li class="breadcrumb first"><a href="index.html">Metacat 2.19.0 documentation</a> »</li>
</ul>
</div>
</div>
<div class="small-print">
© Copyright 2012, Regents of the University of California.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.6.7.
</div>
</div>
</div>
</body>
</html>