EEA Main template (XHTML) (deprecated)

Page Last modified 25 Jun 2012

2 min read

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

Menu

Main EEA template skeleton ver 1.0

VER 1.0 is DEPRECATED, please do not use this, it will stop working on 17th Sept 2012. You need to migrate to the new template service. Please read the new template ver 2.0 HTML5

------------

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. For other technology use similar remote inclusions tools. You must also locally cache the API response for better performance. See caching the respone 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <head>

    <title>Page title - EEA/Eionet</title>

    <tal:head replace="structure here/getRequiredHead" />

    Insert here your custom css, js and meta tags.
    
    </head>
    <body>
        <div id="visual-portal-wrapper">
        
        <tal:header replace="structure here/getHeader" />
        
        <!-- The wrapper div. It contains the three columns. -->
        <div id="portal-columns">
            <!-- start of the main and left columns -->
            <div id="visual-column-wrapper">
                <!-- start of main content block -->
                <div id="portal-column-content">
                    <div id="content">
                        <div class="documentContent" id="region-content">    
                        <a name="documentContent"></a>
                        <div class="documentActions">
                            <h5 class="hiddenStructure">Document Actions</h5>
                                <ul>
                                 <li>
                                   <a href="javascript:this.print();">
                                   <img src="http://webservices.eea.europa.eu/templates/print_icon.gif"
                                      alt="Print this page"
                                      title="Print this page" />
                                   </a>
                                  </li>
                                 <li>
                                   <a href="javascript:toggleFullScreenMode();">
                                   <img src="http://webservices.eea.europa.eu/templates/fullscreenexpand_icon.gif"
                                       alt="Toggle full screen mode"
                                       title="Toggle full screen mode" />
                                   </a>
                                 </li>
                               </ul>
                       </div>  
                       
                       Document content region: Your static/dynamic content goes here.
                        
                        </div>
                    </div>
                </div>
                <!-- end of main content block -->
                    
                <!-- start of the left (by default at least) column -->
                <div id="portal-column-one">
                    <div class="visualPadding">
                    Left column content
                           If home page: Multi-tabs Boxes.
                           If subsite section: local sub navigation.
                           <!-- example of left menu navigation -->
                           <tal:leftmenu replace="structure python:here.getSubNavigation('default','products')" />

                    </div>

                </div>

                <!-- end of the left (by default at least) column -->

            </div>

            <!-- end of the main and left columns -->

            <!-- start of right (by default at least) column -->

            <div id="portal-column-two">

                <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 replace="structure here/getFooter" />
        
        </div>
    </body>
    </html>

Hide/show columns

If ou would like to hide columns, you can do this by simply adding a class name in the div with id=portal-columns. See below.

To hide right column

<div id="portal-columns" class="visualColumnHideTwo">

To hide left column

<div id="portal-columns" class="visualColumnHideOne">

To hide both left and right columns

<div id="portal-columns" class="visualColumnHideOneTwo">

Note that when you use the above classes, you also need to make sure no content is dynamically inserted in the columns divs you don't want to show.

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="http://www.eea.europa.eu/rss.gif"/>
   </a>
</li>