All official European Union website addresses are in the europa.eu domain.
See all EU institutions and bodiesDo something for our planet, print this page only if needed. Even a small action can make an enormous difference when millions of people do it!
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>
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.
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".
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>
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.
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:
For references, please go to https://www.eea.europa.eu/code/templates/eea-main-template-v3 or scan the QR code.
PDF generated on 08 Oct 2024, 10:21 AM
Engineered by: EEA Web Team
Software updated on 26 September 2023 08:13 from version 23.8.18
Software version: EEA Plone KGS 23.9.14
Document Actions
Share with others