Personal tools

next
previous
items

Skip to content. | Skip to navigation

Sound and independent information
on the environment

You are here: Home / Code and APIs for developers / EEA Template Service and API / EEA Main template V2 (HTML5)

EEA Main template V2 (HTML5)

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

Main EEA template skeleton ver 2.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 V2. 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>
<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 class="documentActions">
                        <h5 class="hiddenStructure">
                            Document Actions
                        </h5>
                        <h2 class="share-title">Share with others</h2>

                        <table class="table-document-actions">
                            <tr>
                                <td>
                                     <div id="socialmedia-list">
                                        <div id="delicious" class="social-box">
                                            <a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
                                                <img src="http://www.eea.europa.eu/delicious20x20.png" alt="Delicious">
                                            </a>
                                        </div>                                     
                                        <div id="twitter" class="social-box">
                                            <a href="https://twitter.com/share" class="twitter-share-button"></a>
                                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                                        </div>
                                        <div id="google" class="social-box">
                                            <g:plusone size="medium"></g:plusone>
                                            <script type="text/javascript">
                                                (function() {
                                                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                                    po.src = 'https://apis.google.com/js/plusone.js';
                                                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                                })();
                                            </script>
                                        </div>
                                        <div id="facebook" class="social-box">
                                            <div id="fb-root"></div>
                                            <script>
                                                (function(d, s, id) {
                                                    var js, fjs = d.getElementsByTagName(s)[0];
                                                    if (d.getElementById(id)) return;
                                                    js = d.createElement(s); js.id = id;
                                                    js.src = '//connect.facebook.net/en_GB/all.js#xfbml=1';
                                                    fjs.parentNode.insertBefore(js, fjs);
                                                }(document, 'script', 'facebook-jssdk'));
                                            </script>
                                            <div class="fb-like" data-send="true" data-layout="button_count" data-show-faces="false"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="align-right">
                                    <ul>
                                        <li id="document-action-print">
                                            <a href="javascript:this.print();">
                                                <img src="http://www.eea.europa.eu/templates/print_icon.gif"
                                                    alt="Print this page"
                                                    title="Print this page" />
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                </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="http://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.

Geographical coverage

[+] Show Map

Document Actions

Comments

European Environment Agency (EEA)
Kongens Nytorv 6
1050 Copenhagen K
Denmark
Phone: +45 3336 7100