Revision 8272
Added by ben leinfelder over 10 years ago
| 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
minor edits to the UI theme section. https://projects.ecoinformatics.org/ecoinfo/issues/6067