Project

General

Profile

Revision 8272

minor edits to the UI theme section. https://projects.ecoinformatics.org/ecoinfo/issues/6067

View differences:

docs/user/metacat/source/themes.rst
1 1
Modifying and Creating Themes
2
===================
2
=============================
3 3
.. versionadded:: 2.2.0
4 4

  
5 5
.. contents::
6 6
  
7
MetacatUI's theming system, MetacatUI, is deployed separately from Metacat, allowing more 
8
independent user interface customization. MetacatUI is structured in a Model-view-controller
7
Metacat's theming system, MetacatUI, is deployed separately from Metacat, allowing more 
8
independent user interface customization. MetacatUI is structured in a model-view-controller
9 9
architecture using `Backbone.js <http://www.backbonejs.org>`_. Some background knowledge on Backbone.js may be helpful for 
10 10
advanced modification of MetacatUI, but is not necessary for editing the CSS styling and HTML of 
11
the included Metacat views. 
11
the included MetacatUI views. 
12 12

  
13 13
.. figure:: images/screenshots/image007.png
14 14

  
15
   Metacat's default home page. Users can customize the appearance using themes. 
15
   MetacatUI's default home page. Users can customize the appearance using themes. 
16 16

  
17 17
Quick Start Using the Default Theme
18
---------------------
18
-----------------------------------
19 19
To use the default theme, shown in the figure above, follow these steps for a quick start with MetacatUI:
20 20

  
21 21
1. Copy the ``js/themes/default`` directory and rename it to your organization's name or choose a unique theme name.
......
50 50

  
51 51
	::
52 52
	 
53
	  <script data-theme="default" data-metacat-context="knb" id="loader" type="text/javascript" src="loader.js"></script>
53
	  <script data-theme="default" data-metacat-context="metacat" id="loader" type="text/javascript" src="loader.js"></script>
54 54

  
55 55

  
56 56
Creating a Custom Theme
57
---------------------
57
-----------------------
58 58
All themes share the same CSS, HTML, JavaScript and image files. Any of these files can be customized by creating
59 59
a new theme. By creating a new theme, these shared default files
60 60
are overridden by your custom theme files.
61 61

  
62
1. Copy an existing theme directory, found in ``js/themes``, and rename that directory after your new theme.
62
1. Copy an existing theme directory structure, found in ``js/themes``, and rename that directory after your new theme.
63 63
Notice that each theme directory looks something like this:
64 64

  
65 65
	::
......
71 71
	  config.js
72 72
		
73 73

  
74
2. To start fresh, delete everything from all directories except the ``config.js`` file.
74
2. Only the ``config.js`` file is required for your theme - overrides are added to this configuration file as needed.
75 75

  
76 76
3. Add a CSS file to your theme by creating a CSS file in the ``js/themes/<yourtheme>/css/`` directory
77 77
   named ``metacatui.css``
......
107 107

  
108 108
	::
109 109
	 
110
	  <script data-theme="default" data-metacat-context="knb" id="loader" type="text/javascript" src="loader.js"></script>
110
	  <script data-theme="default" data-metacat-context="metacat" id="loader" type="text/javascript" src="loader.js"></script>
111 111

  
112 112

  
113 113
Changing the background images on the default theme
114
~~~~~~~~~~~~~
114
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
115 115
The ``js/templates/app.html`` file contains the ``<img>`` element for the background image:
116 116

  
117 117
	::
......
126 126

  
127 127

  
128 128
Advanced options for custom themes
129
~~~~~~~~~~~~~
129
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
130 130
Advanced users can choose to override the JavaScript files for even more customization of MetcatUI.
131 131

  
132 132

  
......
176 176
Creating a Custom Skin
177 177
----------------------
178 178
.. deprecated:: 2.2.0
179
   Use themes instead
179
   Use MetacatUI themes for any new UI development. Metacat's original skinning 
180
   mechanism is still included and used for aspects of rendering metadata, but is 
181
   not the preferred method for building web clients for Metacat.
182
   
183
   To MetacatUI themes, select ``metacatui`` as the default skin during skin configuration
184
   in the administration interface.
180 185
	
181 186
Skins are used in Metacat to customize the appearance of the search and display
182 187
web interface that is presented by Metacat.  Skins can be used to make a Metacat
......
187 192
directories. Step-by-step directions for creating and installing a custom skin 
188 193
are included below:
189 194

  
190
1. Copy an exisiting skin directory. We recommend using the "default" directory.
195
1. Copy an existing skin directory. We recommend using the "default" directory.
191 196

  
192 197
  ::
193 198
  

Also available in: Unified diff