« Explorations into UMN Shibboleth Auth - Part 3 Testing and Configuring Shibboleth SP | Main | Explorations into UMN Shibboleth Auth - Part 4 Configuring Shibboleth SP to use UMN test IdP »

Steps to implement UMN web template in Contao CMS


University of Minnesota has created a web template that features UMN header and footer . This template is becoming a requirement for all UMN domain websites by the end of 2010. The template code that is provided is includes the necessary css, javascript, and html files and is the easiest to implement if the website is created in Dreamweaver or another HTML editor. University Technology Training Center offers a class on implementing the UMN web template with Dreamweaver. If the website is not edited by simply a text editor, but rather with a web content management system, then implementing the UMN template can be more challenging. This article shows how to implement the UMN web template with Contao CMS (formerly known as TYPOlight).

Steps to implement UMN templates in Contao CMS

  1. Install Contao according to documentation: http://www.contao.org/documentation.html . Do not install the demonstration site.
  2. Download UMN web templates from http://www.webdepot.umn.edu/templates.php
  3. Upload Web template files to /contao_root/tl_files/umn_template
  4. Import UMN template CSS files into Contao:

    1. With the browser enter Contao admin interface (http://yourdomain/contao)
    2. Login
    3. Create a new theme under themes. Provide a theme name and theme author's name. For Folders select umn_template, for templates folder templates/umn_template folder (you have to create /templates/umn_template folder in Contao Templates area before hand).
    4. For the theme that you created, click on CSS icon, and then CSS import
    5. Import all css files that come with the UMN template
    6. Change the print style sheet to only apply to print and not all.
    7. Edit the CSS files to direct them to correct asset location (When css files get imported, they are re-created in the root folder of your site, but assets (images etc) are still in /contao_root/tl_files/umn_template .
    8. You may benefit from installing CSSeditor extension (note, does not work in Contao v2.9RC1 yet)
    9. Edit directives where it is pointing to images
  5. Create front end modules for the header:

    1. Create a new Custom HTML module and call it UMN header
    2. Copy everything between <!-- * BEGIN TEMPLATE HEADER (MAROON BAR)* --> and <!--END UofM TEMPLATE HEADER--> from index_2.7.3.html.
    3. Remove the last </div> tag. This </div> would otherwise close the wrapper div.
    4. Change the path to the Search image to tl_files/umn_2.7.3/assets/img/search_button.gif
  6. Create front end module for the footer:

    1. Create a new Custom HTML module and call it UMN footer
    2. Copy everything between <!-- * BEGIN TEMPLATE FOOTER--> and <!--END UofM TEMPLATE FOOTER--> from index_2.7.3.html
  7. Create a custom Contao template to work with your layout:

    1. In Contao back end, click on Templates, then New Template
    2. Choose fe_page.tpl for the template and umn_template as a target folder.
  8. Add <div class="container_12" id="bg273"> to the fe_page.tpl page, under <div id="container"> statement (not sure if we need to add another closing div tag because of this. Seems to work fine without it)
  9. Create a page layout that includes the modules:

    1. Include the header and indicate header height (UMN Template header and campus links are 85 pixels wide)
    2. Include the footer and indicate footer height
    3. Choose the number of columns
    4. Select the style sheets.
    5. Change the order of style sheets to be: 1. reset, 2. Text, 3. Template, 4. Optional, 5, print.
    6. Select the custom layout that you created
    7. Add <script type="text/javascript" src="tl_files/umn_2.7.3/lib/js/searchfield.js"></script> in the head section of the fe_page.tpl file to enable the search javascript here. Please note that this javascript conflicts with some of the mootools javascript such as image slimbox and possibly others.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)