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
. 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
- Install Contao according to documentation: http://www.contao.org/documentation.html . Do not install the demonstration site.
- Download UMN web templates from http://www.webdepot.umn.edu/templates.php
- Upload Web template files to /contao_root/tl_files/umn_template
Import UMN template CSS files into Contao:
- With the browser enter Contao admin interface (http://yourdomain/contao)
- 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).
- For the theme that you created, click on CSS icon, and then CSS import
- Import all css files that come with the UMN template
- Change the print style sheet to only apply to print and not all.
- 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 .
- You may benefit from installing CSSeditor extension (note, does not work in Contao v2.9RC1 yet)
- Edit directives where it is pointing to images
Create front end modules for the header:
- Create a new Custom HTML module and call it UMN header
- Copy everything between <!-- * BEGIN TEMPLATE HEADER (MAROON BAR)* --> and <!--END UofM TEMPLATE HEADER--> from index_2.7.3.html.
- Remove the last </div> tag. This </div> would otherwise close the wrapper div.
- Change the path to the Search image to tl_files/umn_2.7.3/assets/img/search_button.gif
Create front end module for the footer:
- Create a new Custom HTML module and call it UMN footer
- Copy everything between <!-- * BEGIN TEMPLATE FOOTER--> and <!--END UofM TEMPLATE FOOTER--> from index_2.7.3.html
Create a custom Contao template to work with your layout:
- In Contao back end, click on Templates, then New Template
- Choose fe_page.tpl for the template and umn_template as a target folder.
- 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)
Create a page layout that includes the modules:
- Include the header and indicate header height (UMN Template header and campus links are 85 pixels wide)
- Include the footer and indicate footer height
- Choose the number of columns
- Select the style sheets.
- Change the order of style sheets to be: 1. reset, 2. Text, 3. Template, 4. Optional, 5, print.
- Select the custom layout that you created