Hosted by CU logo University of Colorado
Boulder
Powered by ESGF-CoG logo
Welcome, Guest. | Login | Create Account
CoG logo
You are at the CoG-CU node
 

Customizing the header and footer

Release 2.5 of CoG introduced the ability for organizations to create a customized header and footer around their ESGF-CoG installation. These elements allow organizations to brand their installation with organzational logos and links.

The Defaults

The CoG distribution comes with a default header and footer that have been only partially customized. Action must be taken to override these defaults.

  • The default files are:
    • cog/templates/cog/common/cog_header_custom.html
    • cog/templates/cog/common/cog_footer_custom.html
  • It is hoped that the specified styling will be retained. This maintains a continuity of styling across federated CoG instances:
    • Institutional logos are on the left.
    • The ESGF logo, which comes with the distribution is on the right.
    •  {{site.name}} is automatically added to the header. {{site.name}} is set in the vcog_settings.cfg file (see the installation instructions for details).
    • The color of the banner is set within the cogstyle.css. It shoudl not be overridden.

Figure 1: Screenshot of the default header. Note the placeholder for organizational logos. This is the default as of v2.11 of CoG.

Figure 2: Screenshot of the default footer. Note the placeholder for organizational links.

Overridding the Defaults

The default header and footer can be overridden by placing a custom temaplate with the same name under the
root level directory <COG_CONFIG_DIR>/mytemplates/.  Note that the /mytemplates directory is the equivilant to the /templates in the path below.

  • COG_CONFIG_DIR=/usr/local/cog/cog_config by default

For example, to override the template /cog/templates/cog/common/cog_header_custom.html and /cog/templates/common/cog_footer_custom.html which come with the distribution, create the two custom files:

  • /usr/local/cog/cog_config/mytemplates/cog/common/cog_header_custom.html
  • /usr/local/cog/cog_config/mytemplates/cog/common/cog_footer_custom.html

Images and other media should be located under the directory <COG_CONFIG_DIR>/mymedia/ and referenced from within the template as "/mymedia/<image name>".

For example, the file located at /usr/local/cog/mymedia/nasa.jpeg can be loaded by any template as src="/mymedia/nasa.jpeg" (please note the first leading '/').

Example code

  • Several example files come with the distribution.
  • They are located in /resources/noaa/mytemplates/cog/common.

Figure 3: Screenshot of an example header.
 

Last Update: Nov. 10, 2015, 11:21 a.m. by Hydra Administrator