Project

General

Profile

« Previous | Next » 

Revision 8706

Added by Lauren Walker over 10 years ago

Added an explanation of "metacat context" to the Metacat Themes docs based on questions asked by an actual user following our instructions in the docs.

View differences:

docs/user/metacat/source/themes.rst
47 47 
4. **Create your theme map:** By default, Metacat will use the default theme templates unless you specifically tell Metacat to override these with the template files in your custom theme.
48 48 
In the ``js/themes/<yourtheme>/config.js`` file, change the theme name on line 1, ``default``, to your chosen new theme name.
49 49 
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.
50
51 
  ::
50 52 

  		




  51
  
  
    
  ::


  		




  52
  
  
    
	


  		




  53
  53
  
    
	var theme = theme || "default";


  		




  54
  54
  
    
	var themeMap = 


  		




  55
  55
  
    
	{


  		




  ......




  62
  62
  
    

  		




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


  		




  64
  64
  
    

  		




  
  65
  
    
7. Open ``index.html``. Edit the following line to reflect your theme name (``data-theme``) and your Metacat


  		




  
  66
  
    
   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.)


  		




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


  		




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


  		




  
  68
  
    
   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.)


  		




  67
  69
  
    

  		




  68
  70
  
    
	::


  		




  69
  71
  
    
	 


  		




  70
  72
  
    
	  <script data-theme="default" data-metacat-context="metacat" id="loader" type="text/javascript" src="loader.js"></script>


  		




  71
  73
  
    

  		




  72
  74
  
    

  		




  73
  
  
    

  		




  74
  75
  
    
Creating a Custom Theme


  		




  75
  76
  
    
-----------------------


  		




  76
  77
  
    
All themes share the same CSS, HTML, JavaScript and image files. Any of these files can be customized by creating


  		




  ......




  86
  87
  
    
	  routers/


  		




  87
  88
  
    
	  templates/


  		




  88
  89
  
    
	  config.js


  		




  89
  
  
    

  		




  
  90
  
    
		


  		




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


  		




  91
  92
  
    
   named ``metacatui.css``


  		




  92
  93
  
    

  		












Also available in:  Unified diff