cdocutils.nodes document q)q}q(U nametypesq}q(Xmodifying and creating themesqNX#quick start using the default themeqNXcreating a custom themeqNX3changing the background images on the default themeq NXmetacatui githubq Xcreating a custom skinq NXwww.backbonejs.orgq X metacatuiq Xusing custom endpointsqNX"advanced options for custom themesqNXcontentsqNX backbone.jsquUsubstitution_defsq}qUparse_messagesq]q(cdocutils.nodes system_message q)q}q(U rawsourceqUUparentqcdocutils.nodes section q)q}q(hUhh)q}q(hUhhUsourceq X`/var/lib/jenkins/jobs/Metacat_stable/workspace/METACAT_2_8_2/docs/user/metacat/source/themes.rstq!Utagnameq"Usectionq#U attributesq$}q%(Udupnamesq&]Uclassesq']Ubackrefsq(]Uidsq)]q*Umodifying-and-creating-themesq+aUnamesq,]q-hauUlineq.KUdocumentq/hUchildrenq0]q1(cdocutils.nodes title q2)q3}q4(hXModifying and Creating Themesq5hhh h!h"Utitleq6h$}q7(h)]h(]h&]h']h,]Urefidq8Uid2q9uh.Kh/hh0]q:cdocutils.nodes Text q;XModifying and Creating Themesq(hh5hh3ubaubcsphinx.addnodes versionmodified q?)q@}qA(hXNew in version 2.2.0.hhh h!h"UversionmodifiedqBh$}qC(UversionqDX2.2.0qEh)]h(]h&]h']h,]UtypeqFX versionaddedqGuh.Kh/hh0]qHcdocutils.nodes paragraph qI)qJ}qK(hXNew in version 2.2.0.hh@h h!h"U paragraphqLh$}qM(U translatableh)]h(]h&]h']h,]uh.Kh/hh0]qNcdocutils.nodes inline qO)qP}qQ(hXNew in version 2.2.0.h$}qR(h&]h']qShBah(]h)]h,]uhhJh0]qTh;XNew in version 2.2.0.qUqV}qW(hUhhPubah"UinlineqXubaubaubcdocutils.nodes topic qY)qZ}q[(hUhhh h!h"Utopicq\h$}q](h&]h']q^Ucontentsq_ah(]h)]q`Ucontentsqaah,]qbhauh.Kh/hh0]qc(h2)qd}qe(hXContentsh$}qf(h&]h']h(]h)]h,]uhhZh0]qgh;XContentsqhqi}qj(hUhhdubah"h6ubcdocutils.nodes bullet_list qk)ql}qm(hUhhZh Nh"U bullet_listqnh$}qo(h&]h']h(]h)]h,]uh.Nh/hh0]qpcdocutils.nodes list_item qq)qr}qs(hUh$}qt(h&]h']h(]h)]h,]uhhlh0]qu(hI)qv}qw(hUh$}qx(h&]h']h(]h)]h,]uhhrh0]qycdocutils.nodes reference qz)q{}q|(hUh$}q}(h)]q~h9ah(]h&]h']h,]Urefidh+uhhvh0]qh;XModifying and Creating Themesqq}q(hh5hh{ubah"U referencequbah"hLubhk)q}q(hUh$}q(h&]h']h(]h)]h,]uhhrh0]q(hq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid3qah(]h&]h']h,]UrefidU#quick-start-using-the-default-themequhhh0]qh;X#Quick Start Using the Default Themeqq}q(hX#Quick Start Using the Default Themeqhhubah"hubah"hLubah"U list_itemqubhq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]q(hI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid4qah(]h&]h']h,]UrefidUcreating-a-custom-themequhhh0]qh;XCreating a Custom Themeqq}q(hXCreating a Custom Themeqhhubah"hubah"hLubhk)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]q(hq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid5qah(]h&]h']h,]UrefidU3changing-the-background-images-on-the-default-themequhhh0]qh;X3Changing the background images on the default themeq…q}q(hX3Changing the background images on the default themeqhhubah"hubah"hLubah"hubhq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid6qah(]h&]h']h,]UrefidU"advanced-options-for-custom-themesquhhh0]qh;X"Advanced options for custom themesqՅq}q(hX"Advanced options for custom themesqhhubah"hubah"hLubah"hubeh"hnubeh"hubhq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid7qah(]h&]h']h,]UrefidUusing-custom-endpointsquhhh0]qh;XUsing Custom Endpointsq腁q}q(hXUsing Custom Endpointsqhhubah"hubah"hLubah"hubhq)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhI)q}q(hUh$}q(h&]h']h(]h)]h,]uhhh0]qhz)q}q(hUh$}q(h)]qUid8qah(]h&]h']h,]UrefidUcreating-a-custom-skinquhhh0]qh;XCreating a Custom Skinqq}q(hXCreating a Custom Skinqhhubah"hubah"hLubah"hubeh"hnubeh"hubaubeubhI)q}r(hX Metacat's theming system, `MetacatUI `_, is deployed separately from Metacat, allowing more independent user interface customization. Check the `MetacatUI GitHub `_ for the most up to date version.hhh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;XMetacat's theming system, rr}r(hXMetacat's theming system, hhubhz)r}r(hX1`MetacatUI `_h$}r(UnameX MetacatUIUrefurir X"https://github.com/NCEAS/metacatuir h)]h(]h&]h']h,]uhhh0]r h;X MetacatUIr r }r(hUhjubah"hubcdocutils.nodes target r)r}r(hX% U referencedrKhhh"Utargetrh$}r(Urefurij h)]rU metacatuirah(]h&]h']h,]rh auh0]ubh;Xi, is deployed separately from Metacat, allowing more independent user interface customization. Check the rr}r(hXi, is deployed separately from Metacat, allowing more independent user interface customization. Check the hhubhz)r}r(hX8`MetacatUI GitHub `_h$}r(UnameXMetacatUI GitHubj X"https://github.com/NCEAS/metacatuirh)]h(]h&]h']h,]uhhh0]rh;XMetacatUI GitHubr r!}r"(hUhjubah"hubj)r#}r$(hX% jKhhh"jh$}r%(Urefurijh)]r&Umetacatui-githubr'ah(]h&]h']h,]r(h auh0]ubh;X! for the most up to date version.r)r*}r+(hX! for the most up to date version.hhubeubhI)r,}r-(hX,MetacatUI is structured in a model-view-controller architecture using `Backbone.js `_. 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.hhh h!h"hLh$}r.(h&]h']h(]h)]h,]uh.K h/hh0]r/(h;XFMetacatUI is structured in a model-view-controller architecture using r0r1}r2(hXFMetacatUI is structured in a model-view-controller architecture using hj,ubhz)r3}r4(hX*`Backbone.js `_h$}r5(UnameX Backbone.jsj Xhttp://www.backbonejs.orgr6h)]h(]h&]h']h,]uhj,h0]r7h;X Backbone.jsr8r9}r:(hUhj3ubah"hubj)r;}r<(hX jKhj,h"jh$}r=(Urefurij6h)]r>U backbone-jsr?ah(]h&]h']h,]r@hauh0]ubh;X. 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.rArB}rC(hX. 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.hj,ubeubcdocutils.nodes figure rD)rE}rF(hUhhh h!h"UfigurerGh$}rH(h&]h']h(]h)]rIUid1rJah,]uh.Kh/hh0]rK(cdocutils.nodes image rL)rM}rN(hX.. figure:: images/screenshots/image007.png MetacatUI's default home page. Users can customize the appearance using themes. hjEh h!h"UimagerOh$}rP(UuriXimages/screenshots/image007.pngrQh)]h(]h&]h']U candidatesrR}rSU*jQsh,]uh.Kh0]ubcdocutils.nodes caption rT)rU}rV(hXOMetacatUI's default home page. Users can customize the appearance using themes.rWhjEh h!h"UcaptionrXh$}rY(h&]h']h(]h)]h,]uh.Kh0]rZh;XOMetacatUI's default home page. Users can customize the appearance using themes.r[r\}r](hjWhjUubaubeubhh)r^}r_(hUhhh h!h"h#h$}r`(h&]h']h(]h)]rahah,]rbhauh.KNh/hh0]rc(h2)rd}re(hhhj^h h!h"h6h$}rf(h)]h(]h&]h']h,]h8huh.KNh/hh0]rgh;XCreating a Custom Themerhri}rj(hhhjdubaubhI)rk}rl(hXAll 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.rmhj^h h!h"hLh$}rn(h&]h']h(]h)]h,]uh.KOh/hh0]roh;XAll 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.rprq}rr(hjmhjkubaubhI)rs}rt(hX1. **Create a new theme:** Copy an existing theme directory structure, found in ``js/themes``, and rename that directory after your new theme. Notice that each theme directory looks something like this:hj^h h!h"hLh$}ru(h&]h']h(]h)]h,]uh.KRh/hh0]rv(h;X1. rwrx}ry(hX1. hjsubcdocutils.nodes strong rz)r{}r|(hX**Create a new theme:**h$}r}(h&]h']h(]h)]h,]uhjsh0]r~h;XCreate a new theme:rr}r(hUhj{ubah"Ustrongrubh;X6 Copy an existing theme directory structure, found in rr}r(hX6 Copy an existing theme directory structure, found in hjsubcdocutils.nodes literal r)r}r(hX ``js/themes``h$}r(h&]h']h(]h)]h,]uhjsh0]rh;X js/themesrr}r(hUhjubah"Uliteralrubh;Xm, and rename that directory after your new theme. Notice that each theme directory looks something like this:rr}r(hXm, and rename that directory after your new theme. Notice that each theme directory looks something like this:hjsubeubcdocutils.nodes block_quote r)r}r(hUhj^h h!h"U block_quoterh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rcdocutils.nodes literal_block r)r}r(hX'css/ img/ routers/ templates/ config.jshjh"U literal_blockrh$}r(U xml:spacerUpreserverh)]h(]h&]h']h,]uh.KWh0]rh;X'css/ img/ routers/ templates/ config.jsrr}r(hUhjubaubaubcdocutils.nodes enumerated_list r)r}r(hUhj^h h!h"Uenumerated_listrh$}r(UsuffixrU.UstartrKh)]h(]h&]UprefixrUh']h,]UenumtyperUarabicruh.K]h/hh0]r(hq)r}r(hX**Style your theme** Add a CSS file to your theme by creating a CSS file in the ``js/themes//css/`` directory named ``metacatui.css`` hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hX**Style your theme** Add a CSS file to your theme by creating a CSS file in the ``js/themes//css/`` directory named ``metacatui.css``hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.K]h0]r(jz)r}r(hX**Style your theme**h$}r(h&]h']h(]h)]h,]uhjh0]rh;XStyle your themerr}r(hUhjubah"jubh;X< Add a CSS file to your theme by creating a CSS file in the rr}r(hX< Add a CSS file to your theme by creating a CSS file in the hjubj)r}r(hX``js/themes//css/``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xjs/themes//css/rr}r(hUhjubah"jubh;X directory named rr}r(hX directory named hjubj)r}r(hX``metacatui.css``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X metacatui.cssrr}r(hUhjubah"jubeubaubhq)r}r(hXV**Add images** Add your custom images to the ``js/themes//img`` directory. hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXU**Add images** Add your custom images to the ``js/themes//img`` directory.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.K`h0]r(jz)r}r(hX**Add images**h$}r(h&]h']h(]h)]h,]uhjh0]rh;X Add imagesrr}r(hUhjubah"jubh;X Add your custom images to the rr}r(hX Add your custom images to the hjubj)r}r(hX``js/themes//img``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xjs/themes//imgrr}r(hUhjubah"jubh;X directory.rr}r(hX directory.hjubeubaubhq)r}r(hX\**Edit templates** Add HTML templates to the ``js/themes//templates`` directory. hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hX[**Edit templates** Add HTML templates to the ``js/themes//templates`` directory.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kbh0]r(jz)r}r(hX**Edit templates**h$}r(h&]h']h(]h)]h,]uhjh0]rh;XEdit templatesrr}r(hUhjubah"jubh;X Add HTML templates to the rr}r(hX Add HTML templates to the hjubj)r}r(hX#``js/themes//templates``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xjs/themes//templatesrr}r(hUhjubah"jubh;X directory.rr}r(hX directory.hjubeubaubhq)r }r (hX**Create your theme map** Open the ``js/themes//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. hjh h!h"hh$}r (h&]h']h(]h)]h,]uh.Nh/hh0]r hI)r }r(hX**Create your theme map** Open the ``js/themes//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.hj h h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kdh0]r(jz)r}r(hX**Create your theme map**h$}r(h&]h']h(]h)]h,]uhj h0]rh;XCreate your theme maprr}r(hUhjubah"jubh;X Open the rr}r(hX Open the hj ubj)r}r(hX#``js/themes//config.js``h$}r(h&]h']h(]h)]h,]uhj h0]rh;Xjs/themes//config.jsrr }r!(hUhjubah"jubh;X 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.r"r#}r$(hX 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.hj ubeubaubeubj)r%}r&(hUhj^h h!h"jh$}r'(h&]h']h(]h)]h,]uh.Nh/hh0]r(j)r)}r*(hX5var theme = theme || "default"; var themeMap = { '*': { // example overrides are provided here //'views/AboutView' : 'themes/' + theme + '/views/AboutView.js', //'templates/navbar.html' : 'themes/' + theme + '/templates/navbar.html' } };hj%h"jh$}r+(jjh)]h(]h&]h']h,]uh.Khh0]r,h;X5var theme = theme || "default"; var themeMap = { '*': { // example overrides are provided here //'views/AboutView' : 'themes/' + theme + '/views/AboutView.js', //'templates/navbar.html' : 'themes/' + theme + '/templates/navbar.html' } };r-r.}r/(hUhj)ubaubaubhI)r0}r1(hXChange 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 files. The pattern is:hj^h h!h"hLh$}r2(h&]h']h(]h)]h,]uh.Krh/hh0]r3(h;X!Change the theme name on line 1, r4r5}r6(hX!Change the theme name on line 1, hj0ubj)r7}r8(hX ``default``h$}r9(h&]h']h(]h)]h,]uhj0h0]r:h;Xdefaultr;r<}r=(hUhj7ubah"jubh;XK, to your chosen new theme name. Then follow the commented out examples in r>r?}r@(hXK, to your chosen new theme name. Then follow the commented out examples in hj0ubj)rA}rB(hX ``themeMap``h$}rC(h&]h']h(]h)]h,]uhj0h0]rDh;XthemeMaprErF}rG(hUhjAubah"jubh;Xy to explicitly tell Metacat which default shared files should be overridden with your custom theme files. The pattern is:rHrI}rJ(hXy to explicitly tell Metacat which default shared files should be overridden with your custom theme files. The pattern is:hj0ubeubj)rK}rL(hUhj^h h!h"jh$}rM(h&]h']h(]h)]h,]uh.Nh/hh0]rNhI)rO}rP(hXE``path/originalFile.html : 'themes/' + theme + '/path/newFile.html'``rQhjKh h!h"hLh$}rR(h&]h']h(]h)]h,]uh.Kvh0]rSj)rT}rU(hjQh$}rV(h&]h']h(]h)]h,]uhjOh0]rWh;XApath/originalFile.html : 'themes/' + theme + '/path/newFile.html'rXrY}rZ(hUhjTubah"jubaubaubhI)r[}r\(hX;*Note: You do not have to override the CSS or image files.*r]hj^h h!h"hLh$}r^(h&]h']h(]h)]h,]uh.Kxh/hh0]r_cdocutils.nodes emphasis r`)ra}rb(hj]h$}rc(h&]h']h(]h)]h,]uhj[h0]rdh;X9Note: You do not have to override the CSS or image files.rerf}rg(hUhjaubah"UemphasisrhubaubhI)ri}rj(hX7. **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``):hj^h h!h"hLh$}rk(h&]h']h(]h)]h,]uh.Kzh/hh0]rl(h;X7. rmrn}ro(hX7. hjiubjz)rp}rq(hX***Specify your theme and metacat context**h$}rr(h&]h']h(]h)]h,]uhjih0]rsh;X&Specify your theme and metacat contextrtru}rv(hUhjpubah"jubh;X Open rwrx}ry(hX Open hjiubj)rz}r{(hX``index.html``h$}r|(h&]h']h(]h)]h,]uhjih0]r}h;X index.htmlr~r}r(hUhjzubah"jubh;X@. Edit the following line to specify your theme name (attribute rr}r(hX@. Edit the following line to specify your theme name (attribute hjiubj)r}r(hX``data-theme``h$}r(h&]h']h(]h)]h,]uhjih0]rh;X data-themerr}r(hUhjubah"jubh;X&) and your Metacat context (attribute rr}r(hX&) and your Metacat context (attribute hjiubj)r}r(hX``data-metacat-context``h$}r(h&]h']h(]h)]h,]uhjih0]rh;Xdata-metacat-contextrr}r(hUhjubah"jubh;X):rr}r(hX):hjiubeubj)r}r(hUhj^h h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rj)r}r(hXxhjh"jh$}r(jjh)]h(]h&]h']h,]uh.Kh0]rh;Xxrr}r(hUhjubaubaubh)r}r(hUhj^h h!h"h#h$}r(h&]h']h(]h)]rhah,]rh auh.Kh/hh0]r(h2)r}r(hhhjh h!h"h6h$}r(h)]h(]h&]h']h,]h8huh.Kh/hh0]rh;X3Changing the background images on the default themerr}r(hhhjubaubhI)r}r(hX[The ``js/templates/app.html`` file contains the ```` element for the background image:rhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;XThe rr}r(hXThe hjubj)r}r(hX``js/templates/app.html``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xjs/templates/app.htmlrr}r(hUhjubah"jubh;X file contains the rr}r(hX file contains the hjubj)r}r(hX ````h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xrr}r(hUhjubah"jubh;X" element for the background image:rr}r(hX" element for the background image:hjubeubj)r}r(hUhjh h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rj)r}r(hX<hjh"jh$}r(jjh)]h(]h&]h']h,]uh.Kh0]rh;X<rr}r(hUhjubaubaubhI)r}r(hX Change the ``data-image-count`` 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 ```` element.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;X Change the rr}r(hX Change the hjubj)r}r(hX``data-image-count``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xdata-image-countrr}r(hUhjubah"jubh;X 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 rr}r(hX 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 hjubj)r}r(hX ````h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xrr}r(hUhjubah"jubh;X element.rr}r(hX element.hjubeubhI)r}r(hX:Store your custom background image files in ``js/themes//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`` ...)hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;X,Store your custom background image files in rr}r(hX,Store your custom background image files in hjubj)r}r(hX)``js/themes//img/backgrounds``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X%js/themes//img/backgroundsrr}r(hUhjubah"jubh;X . Keep the naming convention of rr}r(hX . Keep the naming convention of hjubj)r}r(hX ``bg1.jpg``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xbg1.jpgrr}r (hUhjubah"jubh;X, r r }r (hX, hjubj)r }r(hX ``bg2.jpg``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xbg2.jpgrr}r(hUhj ubah"jubh;XE, etc., making sure that all numbers from 1 to your specified total (rr}r(hXE, etc., making sure that all numbers from 1 to your specified total (hjubj)r}r(hX``data-image-count``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xdata-image-countrr}r(hUhjubah"jubh;X7) are included. (i.e. do not skip any numbers, such as rr}r (hX7) are included. (i.e. do not skip any numbers, such as hjubj)r!}r"(hX ``bg1.jpg``h$}r#(h&]h']h(]h)]h,]uhjh0]r$h;Xbg1.jpgr%r&}r'(hUhj!ubah"jubh;X, r(r)}r*(hX, hjubj)r+}r,(hX ``bg3.jpg``h$}r-(h&]h']h(]h)]h,]uhjh0]r.h;Xbg3.jpgr/r0}r1(hUhj+ubah"jubh;X ...)r2r3}r4(hX ...)hjubeubeubh)r5}r6(hUhj^h h!h"h#h$}r7(h&]h']h(]h)]r8hah,]r9hauh.Kh/hh0]r:(h2)r;}r<(hhhj5h h!h"h6h$}r=(h)]h(]h&]h']h,]h8huh.Kh/hh0]r>h;X"Advanced options for custom themesr?r@}rA(hhhj;ubaubhI)rB}rC(hXdAdvanced users can choose to override the JavaScript files for even more customization of MetacatUI.rDhj5h h!h"hLh$}rE(h&]h']h(]h)]h,]uh.Kh/hh0]rFh;XdAdvanced users can choose to override the JavaScript files for even more customization of MetacatUI.rGrH}rI(hjDhjBubaubhI)rJ}rK(hXThe ``router.js`` 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 ``DataCatalogView`` view instead, would modify ``router.js`` like so:hj5h h!h"hLh$}rL(h&]h']h(]h)]h,]uh.Kh/hh0]rM(h;XThe rNrO}rP(hXThe hjJubj)rQ}rR(hX ``router.js``h$}rS(h&]h']h(]h)]h,]uhjJh0]rTh;X router.jsrUrV}rW(hUhjQubah"jubh;X 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 rXrY}rZ(hX 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 hjJubj)r[}r\(hX``DataCatalogView``h$}r](h&]h']h(]h)]h,]uhjJh0]r^h;XDataCatalogViewr_r`}ra(hUhj[ubah"jubh;X view instead, would modify rbrc}rd(hX view instead, would modify hjJubj)re}rf(hX ``router.js``h$}rg(h&]h']h(]h)]h,]uhjJh0]rhh;X router.jsrirj}rk(hUhjeubah"jubh;X like so:rlrm}rn(hX like so:hjJubeubj)ro}rp(hUhj5h h!h"jh$}rq(h&]h']h(]h)]h,]uh.Nh/hh0]rrj)rs}rt(hX// MetacatUI Router // ---------------- var UIRouter = Backbone.Router.extend({ routes: { '' : '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' },hjoh"jh$}ru(jjh)]h(]h&]h']h,]uh.Kh0]rvh;X// MetacatUI Router // ---------------- var UIRouter = Backbone.Router.extend({ routes: { '' : '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' },rwrx}ry(hUhjsubaubaubhI)rz}r{(hXIn this example, the index path, ``''``, was changed from the value ``renderIndex`` which renders the ``IndexView.js`` view, to ``routeToData`` which reroutes to ``data``, in turn rendering the ``DataCatalogView`` view.hj5h h!h"hLh$}r|(h&]h']h(]h)]h,]uh.Kh/hh0]r}(h;X!In this example, the index path, r~r}r(hX!In this example, the index path, hjzubj)r}r(hX``''``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;X''rr}r(hUhjubah"jubh;X, was changed from the value rr}r(hX, was changed from the value hjzubj)r}r(hX``renderIndex``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;X renderIndexrr}r(hUhjubah"jubh;X which renders the rr}r(hX which renders the hjzubj)r}r(hX``IndexView.js``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;X IndexView.jsrr}r(hUhjubah"jubh;X view, to rr}r(hX view, to hjzubj)r}r(hX``routeToData``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;X routeToDatarr}r(hUhjubah"jubh;X which reroutes to rr}r(hX which reroutes to hjzubj)r}r(hX``data``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;Xdatarr}r(hUhjubah"jubh;X, in turn rendering the rr}r(hX, in turn rendering the hjzubj)r}r(hX``DataCatalogView``h$}r(h&]h']h(]h)]h,]uhjzh0]rh;XDataCatalogViewrr}r(hUhjubah"jubh;X view.rr}r(hX view.hjzubeubj)r}r(hUhj5h h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]r(j)r}r(hXrouteToData: function () { console.log('Called UIRouter.routeToData()'); this.navigate("data", {trigger: true}); },hjh"jh$}r(jjh)]h(]h&]h']h,]uh.Kh0]rh;XrouteToData: function () { console.log('Called UIRouter.routeToData()'); this.navigate("data", {trigger: true}); },rr}r(hUhjubaubhI)r}r(hX**Note: Remember to include any views or routers in your list of overrides in js/themes//config.js for each file you modify**rhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]rjz)r}r(hjh$}r(h&]h']h(]h)]h,]uhjh0]rh;XNote: Remember to include any views or routers in your list of overrides in js/themes//config.js for each file you modifyrr}r(hUhjubah"jubaubeubhI)r}r(hXFor more information about ``Backbone.js``, see the Backbone.js documentation at `www.backbonejs.org `_rhj5h h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;XFor more information about rr}r(hXFor more information about hjubj)r}r(hX``Backbone.js``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X Backbone.jsrr}r(hUhjubah"jubh;X', see the Backbone.js documentation at rr}r(hX', see the Backbone.js documentation at hjubhz)r}r(hX1`www.backbonejs.org `_h$}r(Unameh j Xhttp://www.backbonejs.orgrh)]h(]h&]h']h,]uhjh0]rh;Xwww.backbonejs.orgrr}r(hUhjubah"hubj)r}r(hX jKhjh"jh$}r(Urefurijh)]rUwww-backbonejs-orgrah(]h&]h']h,]rh auh0]ubeubeubeubh)r}r(hUhhh h!h"h#h$}r(h&]h']h(]h)]rhah,]rhauh.Kh/hh0]r(h2)r}r(hhhjh h!h"h6h$}r(h)]h(]h&]h']h,]h8huh.Kh/hh0]rh;XUsing Custom Endpointsrr}r(hhhjubaubhI)r}r(hX5MetacatUI can also be configured to use custom DataONE endpoints for both Member Node and Coordinating Node APIs. The ``dataone`` theme shows an example of this endpoint customization in the ``AppModel.js`` file. In custom themes, the AppModel.js values can be edited to suit your particular deployment needs.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;XvMetacatUI can also be configured to use custom DataONE endpoints for both Member Node and Coordinating Node APIs. The rr}r(hXvMetacatUI can also be configured to use custom DataONE endpoints for both Member Node and Coordinating Node APIs. The hjubj)r}r (hX ``dataone``h$}r (h&]h']h(]h)]h,]uhjh0]r h;Xdataoner r }r(hUhjubah"jubh;X> theme shows an example of this endpoint customization in the rr}r(hX> theme shows an example of this endpoint customization in the hjubj)r}r(hX``AppModel.js``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X AppModel.jsrr}r(hUhjubah"jubh;Xg file. In custom themes, the AppModel.js values can be edited to suit your particular deployment needs.rr}r(hXg file. In custom themes, the AppModel.js values can be edited to suit your particular deployment needs.hjubeubhI)r}r(hX_For querying the DataONE Coordinating Node, for example, the following properties would be set:rhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r h;X_For querying the DataONE Coordinating Node, for example, the following properties would be set:r!r"}r#(hjhjubaubj)r$}r%(hUhjh h!h"jh$}r&(h&]h']h(]h)]h,]uh.Nh/hh0]r'j)r(}r)(hX`context: '', d1Service: "/cn/v2", d1CNBaseUrl: "https://cn.dataone.org", d1CNService: "/cn/v2",hj$h"jh$}r*(jjh)]h(]h&]h']h,]uh.Kh0]r+h;X`context: '', d1Service: "/cn/v2", d1CNBaseUrl: "https://cn.dataone.org", d1CNService: "/cn/v2",r,r-}r.(hUhj(ubaubaubhI)r/}r0(hX:But querying a Metacat Member Node would be configured as:r1hjh h!h"hLh$}r2(h&]h']h(]h)]h,]uh.Kh/hh0]r3h;X:But querying a Metacat Member Node would be configured as:r4r5}r6(hj1hj/ubaubj)r7}r8(hUhjh h!h"jh$}r9(h&]h']h(]h)]h,]uh.Nh/hh0]r:j)r;}r<(hXjcontext: '/metacat', d1Service: '/d1/mn/v2', d1CNBaseUrl: "https://cn.dataone.org/", d1CNService: "cn/v2",hj7h"jh$}r=(jjh)]h(]h&]h']h,]uh.Kh0]r>h;Xjcontext: '/metacat', d1Service: '/d1/mn/v2', d1CNBaseUrl: "https://cn.dataone.org/", d1CNService: "cn/v2",r?r@}rA(hUhj;ubaubaubeubh)rB}rC(hUhhh h!h"h#h$}rD(h&]h']h(]h)]rEhah,]rFh auh.Kh/hh0]rG(h2)rH}rI(hhhjBh h!h"h6h$}rJ(h)]h(]h&]h']h,]h8huh.Kh/hh0]rKh;XCreating a Custom SkinrLrM}rN(hhhjHubaubh?)rO}rP(hXnDeprecated since version 2.2.0: 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.To MetacatUI themes, select metacatui as the default skin during skin configuration in the administration interface.hjBh h!h"hBh$}rQ(hDX2.2.0h)]h(]h&]h']h,]hFX deprecatedrRuh.Kh/hh0]rS(hI)rT}rU(hXDeprecated since version 2.2.0: 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.hjOh h!h"hLh$}rV(U translatableh)]h(]h&]h']h,]uh.Nh/hh0]rW(hO)rX}rY(hX Deprecated since version 2.2.0: hjTh h!h"hXh$}rZ(h&]h']r[hBah(]h)]h,]uh.Nh/hh0]r\h;X Deprecated since version 2.2.0: r]r^}r_(hUhjXubaubh;XUse 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.r`ra}rb(hXUse 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.h Nh.Nh/hhjTubeubhI)rc}rd(hXxTo MetacatUI themes, select ``metacatui`` as the default skin during skin configuration in the administration interface.hjOh h!h"hLh$}re(h&]h']h(]h)]h,]uh.Kh/hh0]rf(h;XTo MetacatUI themes, select rgrh}ri(hXTo MetacatUI themes, select hjcubj)rj}rk(hX ``metacatui``h$}rl(h&]h']h(]h)]h,]uhjch0]rmh;X metacatuirnro}rp(hUhjjubah"jubh;XO as the default skin during skin configuration in the administration interface.rqrr}rs(hXO as the default skin during skin configuration in the administration interface.hjcubeubeubhI)rt}ru(hXSkins 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.rvhjBh h!h"hLh$}rw(h&]h']h(]h)]h,]uh.Kh/hh0]rxh;XSkins 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.ryrz}r{(hjvhjtubaubhI)r|}r}(hXTo 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:r~hjBh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]rh;XTo 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:rr}r(hj~hj|ubaubj)r}r(hUhjBh h!h"jh$}r(jU.h)]h(]h&]jUh']h,]jjuh.Kh/hh0]rhq)r}r(hXMCopy an existing skin directory. We recommend using the "default" directory. hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXLCopy an existing skin directory. We recommend using the "default" directory.rhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]rh;XLCopy an existing skin directory. We recommend using the "default" directory.rr}r(hjhjubaubaubaubj)r}r(hUhjBh h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]r(j)r}r(hXSsudo cp -r /style/skins/default/ /style/skins/[yourSkin]/hjh"jh$}r(jjh)]h(]h&]h']h,]uh.Kh0]rh;XSsudo cp -r /style/skins/default/ /style/skins/[yourSkin]/rr}r(hUhjubaubhI)r}r(hXWhere ```` is the directory in which the Metacat application code lives and ``[yourSkin]`` is the name you wish to apply to your skin.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]r(h;XWhere rr}r(hXWhere hjubj)r}r(hX````h$}r(h&]h']h(]h)]h,]uhjh0]rh;X rr}r(hUhjubah"jubh;XC is the directory in which the Metacat application code lives and rr}r(hXC is the directory in which the Metacat application code lives and hjubj)r}r(hX``[yourSkin]``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X [yourSkin]rr}r(hUhjubah"jubh;X, is the name you wish to apply to your skin.rr}r(hX, is the name you wish to apply to your skin.hjubeubeubj)r}r(hUhjBh h!h"jh$}r(jU.jKh)]h(]h&]jUh']h,]jjuh.Kh/hh0]rhq)r}r(hXIn ``[yourSkin]`` directory, change all files named ``default.xxx`` to ``yourSkin.xxx``. The following files should be changed: hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXIn ``[yourSkin]`` directory, change all files named ``default.xxx`` to ``yourSkin.xxx``. The following files should be changed:hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]r(h;XIn rr}r(hXIn hjubj)r}r(hX``[yourSkin]``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X [yourSkin]rr}r(hUhjubah"jubh;X# directory, change all files named rr}r(hX# directory, change all files named hjubj)r}r(hX``default.xxx``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X default.xxxrr}r(hUhjubah"jubh;X to rr}r(hX to hjubj)r}r(hX``yourSkin.xxx``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X yourSkin.xxxrr}r(hUhjubah"jubh;X(. The following files should be changed:rr}r(hX(. The following files should be changed:hjubeubaubaubj)r}r(hUhjBh h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rj)r}r(hXUdefault.css default.js default.properties default.properties.metadata.xml default.xmlhjh"jh$}r(jjh)]h(]h&]h']h,]uh.Kh0]rh;XUdefault.css default.js default.properties default.properties.metadata.xml default.xmlrr}r(hUhjubaubaubj)r}r(hUhjBh h!h"jh$}r(jU.jKh)]h(]h&]jUh']h,]jjuh.Mh/hh0]r(hq)r}r(hXIn the metacat.properties file(``/WEB_INF/metacat.properties``), add ``[yourSkin]`` to the value of the skin.names property. hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXIn the metacat.properties file(``/WEB_INF/metacat.properties``), add ``[yourSkin]`` to the value of the skin.names property.hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Mh0]r(h;XIn the metacat.properties file(rr}r(hXIn the metacat.properties file(hjubj)r}r(hX,``/WEB_INF/metacat.properties``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X(/WEB_INF/metacat.propertiesrr}r(hUhjubah"jubh;X), add rr }r (hX), add hjubj)r }r (hX``[yourSkin]``h$}r (h&]h']h(]h)]h,]uhjh0]rh;X [yourSkin]rr}r(hUhj ubah"jubh;X) to the value of the skin.names property.rr}r(hX) to the value of the skin.names property.hjubeubaubhq)r}r(hX[Restart Tomcat. Log in as the user that runs your Tomcat server (often "tomcat") and type: hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXZRestart Tomcat. Log in as the user that runs your Tomcat server (often "tomcat") and type:rhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Mh0]rh;XZRestart Tomcat. Log in as the user that runs your Tomcat server (often "tomcat") and type:rr}r (hjhjubaubaubeubj)r!}r"(hUhjBh h!h"jh$}r#(h&]h']h(]h)]h,]uh.Nh/hh0]r$j)r%}r&(hX/etc/init.d/tomcat7 restarthj!h"jh$}r'(jjh)]h(]h&]h']h,]uh.M h0]r(h;X/etc/init.d/tomcat7 restartr)r*}r+(hUhj%ubaubaubhI)r,}r-(hXNavigate 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.r.hjBh h!h"hLh$}r/(h&]h']h(]h)]h,]uh.M h/hh0]r0h;XNavigate 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.r1r2}r3(hj.hj,ubaubhI)r4}r5(hXIt 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.r6hjBh h!h"hLh$}r7(h&]h']h(]h)]h,]uh.Mh/hh0]r8h;XIt 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.r9r:}r;(hj6hj4ubaubeubeubh h!h"h#h$}r<(h&]h']h(]h)]r=hah,]r>hauh.Kh/hh0]r?(h2)r@}rA(hhhhh h!h"h6h$}rB(h)]h(]h&]h']h,]h8huh.Kh/hh0]rCh;X#Quick Start Using the Default ThemerDrE}rF(hhhj@ubaubhI)rG}rH(hXZThe 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.rIhhh h!h"hLh$}rJ(h&]h']h(]h)]h,]uh.Kh/hh0]rKh;XZThe 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.rLrM}rN(hjIhjGubaubj)rO}rP(hUhhh h!h"jh$}rQ(jU.h)]h(]h&]jUh']h,]jjuh.Kh/hh0]rR(hq)rS}rT(hX{**Create a new theme:** Duplicate the ``js/themes/default`` directory and rename it to a unique theme name with no spaces. hjOh h!h"hh$}rU(h&]h']h(]h)]h,]uh.Nh/hh0]rVhI)rW}rX(hXz**Create a new theme:** Duplicate the ``js/themes/default`` directory and rename it to a unique theme name with no spaces.hjSh h!h"hLh$}rY(h&]h']h(]h)]h,]uh.Kh0]rZ(jz)r[}r\(hX**Create a new theme:**h$}r](h&]h']h(]h)]h,]uhjWh0]r^h;XCreate a new theme:r_r`}ra(hUhj[ubah"jubh;X Duplicate the rbrc}rd(hX Duplicate the hjWubj)re}rf(hX``js/themes/default``h$}rg(h&]h']h(]h)]h,]uhjWh0]rhh;Xjs/themes/defaultrirj}rk(hUhjeubah"jubh;X? directory and rename it to a unique theme name with no spaces.rlrm}rn(hX? directory and rename it to a unique theme name with no spaces.hjWubeubaubhq)ro}rp(hX**Add your logo:** In the ``js/themes//img`` directory, add the following image files: * Your organization's logo * Any supporter or donor logos to use in the footer hjOh h!h"hh$}rq(h&]h']h(]h)]h,]uh.Nh/hh0]rr(hI)rs}rt(hXa**Add your logo:** In the ``js/themes//img`` directory, add the following image files:ruhjoh h!h"hLh$}rv(h&]h']h(]h)]h,]uh.Kh0]rw(jz)rx}ry(hX**Add your logo:**h$}rz(h&]h']h(]h)]h,]uhjsh0]r{h;XAdd your logo:r|r}}r~(hUhjxubah"jubh;X In the rr}r(hX In the hjsubj)r}r(hX``js/themes//img``h$}r(h&]h']h(]h)]h,]uhjsh0]rh;Xjs/themes//imgrr}r(hUhjubah"jubh;X* directory, add the following image files:rr}r(hX* directory, add the following image files:hjsubeubj)r}r(hUh$}r(h&]h']h(]h)]h,]uhjoh0]rhk)r}r(hUh$}r(UbulletrX*h)]h(]h&]h']h,]uhjh0]r(hq)r}r(hXYour organization's logorh$}r(h&]h']h(]h)]h,]uhjh0]rhI)r}r(hjhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]rh;XYour organization's logorr}r(hjhjubaubah"hubhq)r}r(hX2Any supporter or donor logos to use in the footer h$}r(h&]h']h(]h)]h,]uhjh0]rhI)r}r(hX1Any supporter or donor logos to use in the footerrhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh0]rh;X1Any supporter or donor logos to use in the footerrr}r(hjhjubaubah"hubeh"hnubah"jubeubeubhI)r}r(hX3. **Customize the header and footer:** Create a ``templates`` directory in ``js/themes/`` and copy the following files from ``js/templates`` into that new directory:hhh h!h"hLh$}r(h&]h']h(]h)]h,]uh.Kh/hh0]r(h;X3. rr}r(hX3. hjubjz)r}r(hX$**Customize the header and footer:**h$}r(h&]h']h(]h)]h,]uhjh0]rh;X Customize the header and footer:rr}r(hUhjubah"jubh;X Create a rr}r(hX Create a hjubj)r}r(hX ``templates``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X templatesrr}r(hUhjubah"jubh;X directory in rr}r(hX directory in hjubj)r}r(hX``js/themes/``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xjs/themes/rr}r(hUhjubah"jubh;X# and copy the following files from rr}r(hX# and copy the following files from hjubj)r}r(hX``js/templates``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X js/templatesrr}r(hUhjubah"jubh;X into that new directory:rr}r(hX into that new directory:hjubeubj)r}r(hUhhh Nh"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhk)r}r(hUh$}r(jX*h)]h(]h&]h']h,]uhjh0]r(hq)r}r(hX footer.htmlrh$}r(h&]h']h(]h)]h,]uhjh0]rhI)r}r(hjhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.K!h0]rh;X footer.htmlrr}r(hjhjubaubah"hubhq)r}r(hX navbar.html h$}r(h&]h']h(]h)]h,]uhjh0]rhI)r}r(hX navbar.htmlrhjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.K"h0]rh;X navbar.htmlrr}r(hjhjubaubah"hubeh"hnubaubhI)r}r(hX3a. Open the ``js/themes//templates/footer.html`` 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,hhh h!h"hLh$}r(h&]h']h(]h)]h,]uh.K$h/hh0]r(h;X 3a. Open the rr}r(hX 3a. Open the hjubj)r}r(hX/``js/themes//templates/footer.html``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X+js/themes//templates/footer.htmlrr}r (hUhjubah"jubh;X 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,r r }r (hX 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,hjubeubj)r }r(hUhhh h!h"jh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]r(j)r}r(hX NCEAS hj h"jh$}r(jjh)]h(]h&]h']h,]uh.K)h0]rh;X NCEAS rr}r(hUhjubaubhI)r}r(hXjYou can add or modify any of the HTML in the footer; we are using the logo only as a simple demonstration.rhj h h!h"hLh$}r(h&]h']h(]h)]h,]uh.K-h0]rh;XjYou can add or modify any of the HTML in the footer; we are using the logo only as a simple demonstration.rr}r(hjhjubaubeubhI)r }r!(hX3b. Similarly, open the ``js/themes//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.r"hhh h!h"hLh$}r#(h&]h']h(]h)]h,]uh.K/h/hh0]r$(h;X3b. Similarly, open the r%r&}r'(hX3b. Similarly, open the hj ubj)r(}r)(hX/``js/themes//templates/navbar.html``h$}r*(h&]h']h(]h)]h,]uhj h0]r+h;X+js/themes//templates/navbar.htmlr,r-}r.(hUhj(ubah"jubh;X file and replace the Metacat logo file with your organization's logo file. You can also add more links to this header navigation.r/r0}r1(hX file and replace the Metacat logo file with your organization's logo file. You can also add more links to this header navigation.hj ubeubhI)r2}r3(hX4. **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//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.hhh h!h"hLh$}r4(h&]h']h(]h)]h,]uh.K1h/hh0]r5(h;X4. r6r7}r8(hX4. hj2ubjz)r9}r:(hX**Create your theme map:**h$}r;(h&]h']h(]h)]h,]uhj2h0]r<h;XCreate your theme map:r=r>}r?(hUhj9ubah"jubh;X 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 r@rA}rB(hX 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 hj2ubj)rC}rD(hX#``js/themes//config.js``h$}rE(h&]h']h(]h)]h,]uhj2h0]rFh;Xjs/themes//config.jsrGrH}rI(hUhjCubah"jubh;X( file, change the theme name on line 1, rJrK}rL(hX( file, change the theme name on line 1, hj2ubj)rM}rN(hX ``default``h$}rO(h&]h']h(]h)]h,]uhj2h0]rPh;XdefaultrQrR}rS(hUhjMubah"jubh;X(, to your chosen new theme name. In the rTrU}rV(hX(, to your chosen new theme name. In the hj2ubj)rW}rX(hX ``themeMap``h$}rY(h&]h']h(]h)]h,]uhj2h0]rZh;XthemeMapr[r\}r](hUhjWubah"jubh;X, 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.r^r_}r`(hX, 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.hj2ubeubj)ra}rb(hUhhh h!h"jh$}rc(h&]h']h(]h)]h,]uh.Nh/hh0]rdj)re}rf(hX: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' } };hjah"jh$}rg(jjh)]h(]h&]h']h,]uh.K7h0]rhh;X: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' } };rirj}rk(hUhjeubaubaubj)rl}rm(hUhhh h!h"jh$}rn(jU.jKh)]h(]h&]jUh']h,]jjuh.KAh/hh0]rohq)rp}rq(hXDRepeat step 3-4 as necessary for any other template files you edit. hjlh h!h"hh$}rr(h&]h']h(]h)]h,]uh.Nh/hh0]rshI)rt}ru(hXCRepeat step 3-4 as necessary for any other template files you edit.rvhjph h!h"hLh$}rw(h&]h']h(]h)]h,]uh.KAh0]rxh;XCRepeat step 3-4 as necessary for any other template files you edit.ryrz}r{(hjvhjtubaubaubaubj)r|}r}(hUhhh h!h"jh$}r~(jU.jKh)]h(]h&]jUh']h,]jjuh.KCh/hh0]rhq)r}r(hXOpen ``index.html``. Edit the following line to reflect your theme name (``data-theme``) and your Metacat context (``data-metacat-context``). (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.)hj|h h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]rhI)r}r(hXOpen ``index.html``. Edit the following line to reflect your theme name (``data-theme``) and your Metacat context (``data-metacat-context``). (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.)hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.KCh0]r(h;XOpen rr}r(hXOpen hjubj)r}r(hX``index.html``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X index.htmlrr}r(hUhjubah"jubh;X6. Edit the following line to reflect your theme name (rr}r(hX6. Edit the following line to reflect your theme name (hjubj)r}r(hX``data-theme``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X data-themerr}r(hUhjubah"jubh;X) and your Metacat context (rr}r(hX) and your Metacat context (hjubj)r}r(hX``data-metacat-context``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xdata-metacat-contextrr}r(hUhjubah"jubh;XR). (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.)rr}r(hXR). (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.)hjubeubaubaubj)r}r(hUhhh h!h"jh$}r(jU.jKh)]h(]h&]jUh']h,]jjuh.KEh/hh0]rhq)r}r(hX**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``) (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.) :: hjh h!h"hh$}r(h&]h']h(]h)]h,]uh.Nh/hh0]r(hI)r}r(hX**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``) (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.)hjh h!h"hLh$}r(h&]h']h(]h)]h,]uh.KEh0]r(jz)r}r(hX***Specify your theme and metacat context**h$}r(h&]h']h(]h)]h,]uhjh0]rh;X&Specify your theme and metacat contextrr}r(hUhjubah"jubh;X Open rr}r(hX Open hjubj)r}r(hX``index.html``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X index.htmlrr}r(hUhjubah"jubh;X@. Edit the following line to specify your theme name (attribute rr}r(hX@. Edit the following line to specify your theme name (attribute hjubj)r}r(hX``data-theme``h$}r(h&]h']h(]h)]h,]uhjh0]rh;X data-themerr}r(hUhjubah"jubh;X&) and your Metacat context (attribute rr}r(hX&) and your Metacat context (attribute hjubj)r}r(hX``data-metacat-context``h$}r(h&]h']h(]h)]h,]uhjh0]rh;Xdata-metacat-contextrr}r(hUhjubah"jubh;XQ) (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.)rr}r(hXQ) (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.)hjubeubj)r}r(hUh$}r(h&]h']h(]h)]h,]uhjh0]rj)r}r(hXxhjh"jh$}r(jjh)]h(]h&]h']h,]uh.KJh0]rh;Xxrr}r(hUhjubaubah"jubeubaubeubh h!h"Usystem_messagerh$}r(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypeUINFOruh.KAh/hh0]rhI)r}r(hX:Enumerated list start value not ordinal-1: "5" (ordinal 5)h$}r(h&]h']h(]h)]h,]uhhh0]rh;X:Enumerated list start value not ordinal-1: "5" (ordinal 5)rr}r(hUhjubah"hLubaubh)r}r(hUhhh h!h"jh$}r(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypejuh.KCh/hh0]rhI)r}r(hX:Enumerated list start value not ordinal-1: "7" (ordinal 7)h$}r(h&]h']h(]h)]h,]uhjh0]rh;X:Enumerated list start value not ordinal-1: "7" (ordinal 7)rr}r(hUhjubah"hLubaubh)r}r(hUhhh h!h"jh$}r(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKEUtypeUWARNINGruh.KDh/hh0]rhI)r}r(hX?Enumerated list ends without a blank line; unexpected unindent.h$}r(h&]h']h(]h)]h,]uhjh0]rh;X?Enumerated list ends without a blank line; unexpected unindent.rr}r (hUhjubah"hLubaubh)r }r (hUhhh h!h"jh$}r (h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypejuh.KEh/hh0]r hI)r}r(hX:Enumerated list start value not ordinal-1: "6" (ordinal 6)h$}r(h&]h']h(]h)]h,]uhj h0]rh;X:Enumerated list start value not ordinal-1: "6" (ordinal 6)rr}r(hUhjubah"hLubaubh)r}r(hUhj^h h!h"jh$}r(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypejuh.K]h/hh0]rhI)r}r(hX:Enumerated list start value not ordinal-1: "2" (ordinal 2)h$}r(h&]h']h(]h)]h,]uhjh0]rh;X:Enumerated list start value not ordinal-1: "2" (ordinal 2)rr}r(hUhjubah"hLubaubh)r }r!(hUhjBh h!h"jh$}r"(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypejuh.Kh/hh0]r#hI)r$}r%(hX:Enumerated list start value not ordinal-1: "2" (ordinal 2)h$}r&(h&]h']h(]h)]h,]uhj h0]r'h;X:Enumerated list start value not ordinal-1: "2" (ordinal 2)r(r)}r*(hUhj$ubah"hLubaubh)r+}r,(hUhjBh h!h"jh$}r-(h&]UlevelKh)]h(]Usourceh!h']h,]UlineKUtypejuh.Mh/hh0]r.hI)r/}r0(hX:Enumerated list start value not ordinal-1: "3" (ordinal 3)h$}r1(h&]h']h(]h)]h,]uhj+h0]r2h;X:Enumerated list start value not ordinal-1: "3" (ordinal 3)r3r4}r5(hUhj/ubah"hLubaubeUcurrent_sourcer6NU decorationr7NUautofootnote_startr8KUnameidsr9}r:(hh+hhhhh hh j'h hh jh jhhhhhhahj?uh0]r;hahUU transformerr<NU footnote_refsr=}r>Urefnamesr?}r@Usymbol_footnotesrA]rBUautofootnote_refsrC]rDUsymbol_footnote_refsrE]rFU citationsrG]rHh/hU current_linerINUtransform_messagesrJ]rKUreporterrLNUid_startrMK U autofootnotesrN]rOU citation_refsrP}rQUindirect_targetsrR]rSUsettingsrT(cdocutils.frontend Values rUorV}rW(Ufootnote_backlinksrXKUrecord_dependenciesrYNU rfc_base_urlrZUhttps://tools.ietf.org/html/r[U tracebackr\Upep_referencesr]NUstrip_commentsr^NU toc_backlinksr_Uentryr`U language_coderaUenrbU datestamprcNU report_levelrdKU _destinationreNU halt_levelrfKU strip_classesrgNh6NUerror_encoding_error_handlerrhUbackslashreplaceriUdebugrjNUembed_stylesheetrkUoutput_encoding_error_handlerrlUstrictrmU sectnum_xformrnKUdump_transformsroNU docinfo_xformrpKUwarning_streamrqNUpep_file_url_templaterrUpep-%04drsUexit_status_levelrtKUconfigruNUstrict_visitorrvNUcloak_email_addressesrwUtrim_footnote_reference_spacerxUenvryNUdump_pseudo_xmlrzNUexpose_internalsr{NUsectsubtitle_xformr|U source_linkr}NUrfc_referencesr~NUoutput_encodingrUutf-8rU source_urlrNUinput_encodingrU utf-8-sigrU_disable_configrNU id_prefixrUU tab_widthrKUerror_encodingrUUTF-8rU_sourcerh!Ugettext_compactrU generatorrNUdump_internalsrNU smart_quotesrU pep_base_urlrU https://www.python.org/dev/peps/rUsyntax_highlightrUlongrUinput_encoding_error_handlerrjmUauto_id_prefixrUidrUdoctitle_xformrUstrip_elements_with_classesrNU _config_filesr]Ufile_insertion_enabledrU raw_enabledrKU dump_settingsrNubUsymbol_footnote_startrKUidsr}r(hhhhj'j#hhhhhhh9h{j?j;hjBhj^hhjJjEhj5jjhjhhjjh+hhjhahZuUsubstitution_namesr}rh"h/h$}r(h&]h)]h(]Usourceh!h']h,]uU footnotesr]rUrefidsr}rub.