EEA Main template V3 (HTML5)

Page Last modified 06 May 2019

3 min read

This is the template to be used on each external site in combination with the template service API V3.

Menu

Main EEA template skeleton ver 3.0

The example below shows how the main template looks like in the "Zope Page Template" language. Insert the API response in the appropriate slots in the main template. In the example below the API calls starts with <tal>, the page template language. If you are on remote Zope server, you need to use URLSuck or equivalent tool to get the content from template service via the template service API V3. For other technology use similar remote inclusions tools. You must also locally cache the API response for better performance. See caching the response for more info.

Copy and paste the following template, then cut it into pieces (if needed) according to your template technology.

Add the Template Serivce API calls in the appropriate slots (<tal>).

Add your own dynamic content in the appropriate slots

Do not change the rest of the XHTML code skeleton

<!DOCTYPE html>
<html>
    <head>
        <title>Page title - EEA/Eionet</title>
        <tal:head tal:replace="structure context/getRequiredHead"> </tal:head>
        <!-- Insert here your custom css, js and meta tags. -->
    </head>
    <body>
      <tal:header tal:replace="structure context/getHeader"> </tal:header>
      <div id="visual-portal-wrapper">
      <!-- The wrapper div. It contains the two columns. -->
            <div id="portal-columns">
                <!-- start of the content column -->
                <div id="content" class="column-area">
                    Document content region: Your static/dynamic content goes here.
                </div>

                <!-- end of the main column -->

                <!-- start of right column -->
                <div id="right-column" class="right-column-area">
                    <div class="visualPadding">
                        Right column content
                         This place can be used for other relevant boxes 
                         which should appear on the top-right of the page,
                         e.g. login, subscription services, calendar.
                    </div>
                </div>
                <!-- end of the right (by default at least) column -->

                <div class="visualClear"><!-- --></div> 
            </div>
            <!-- end column wrapper -->

            <tal:footer tal:replace="structure context/getFooter"> </tal:footer>
        </div> <!-- visual-portal-wrapper" -->
    </body>
</html>

Javascript Requirements

If you choose to use the jsdisable='all' argument on fetching the external templates you have to make sure to provide the jQuery and jQuery Tools javascript libraries.

Hide right column

If you would like to hide the right column, you can do this by simply removing the div with id "right-column" and removing the "column-area" class from the div with id "content".

Adding additional document actions icons

In the template there is a slot called "Document actions", this slot is used to add actions for the specific page, like print, send to friend, RSS and so on. The example below shows the code for adding a RSS action link:

<li>
   <a href="http://yoursite.eea.europa.eu/RSS2">
             <img id="icon-rss2" title="RSS2 feed of this listing" alt="RSS2 feed of this listing" src="https://www.eea.europa.eu/rss.gif"/>
   </a>
</li>

Doctypes

The skeleton is compatible with HTML5 and XHTML doctype, by default it uses HTML5 but if your site requires XHTML you can simply replace the doctype.

Upgrading from old templates

If you are upgrading from a single column layout or 2 columns layout (left column disabled, with content in the middle and navigation in the right columns) updating to the new external templates is pretty simple, you just have to put your content and your navigation columns in their slots.

The new design doesn't have built in support for 3 column layout, so if you are upgrading from a 3 columns layout or 2 columns layout but using the left column you have to make some modifications. There are 2 possibilities:

Move your left column into the right slot
Create manually a left slot, and use that for your navigation. In this case you have to implement the correct styling for your new slot.