Main content

Put your content here.
For more instructions, see below...
You may also take a look at our bootrap styleguide .

Changelog

2016-10-24 Require is now namespaced to pons.requirejs
2016-08-08 IVW/SZM-Tracking is no more enabled by default - to enable it, add parameter szm
2016-01-07 Added full-width parameter
2016-01-07 Added "self study" tab (nav1=self-study)
2015-12-09 Renamed "portal" tab to "dictionary"
2015-05-20 Adding "my pons" tab (nav1=my-pons)
2014-08-12 Adding mobile-enabled parameter
2013-11-11 Adding AD_ABOVE_FOOTER template element
2013-11-09 Added a function that should ensure jQuery has been loaded.
Use it like this:
onjQueryReady(function($) {
  $(document).click(function() {
    console.log('click');
  });
});
2013-11-07 Adding TERMS_OF_SERVICE_LINK template element
2013-11-07 Added parameter ad_region to force an ad region
2013-10-18 Adding tabs for nav1=verlag
2013-10-17 Added searchform=shop
2013-10-10 Fixed behaviour when only param searchform=top is given (removed medium-rect ad)
2013-08-27 Using require.js for Javascript loading. If you depend on jQuery, you should be able to use it this way:
requirejs(['jquery'], function($) {
  $(document).click(function() {
    console.log('click');
  });
});
2013-08-07 Search form also in normal template
2013-08-06 Adding responsive nav
2013-07-26 Adding search form (sidebar only)

Instructions

Choosing the base template

First of all, this template has multiple parameters allowing you to adapt it to your application:
sidebar If this parameter is present, the template will include a sidebar
nav1 Allows you to define which tab is active. nav1 sets the top level (portal, shop, verlag) and nav2 the second level For the possible values of the parameters please take a look at the data-pons-tab attributes in the html code. Note: We don't know all the items here, so we may display placeholders for the second level ( applies to shop).
nav2
no-ads If this parameter is present, the template should be free of ads
searchform Allows you to define where and how the search form appears (currently only applicable when sidebar is present). By default, the search form appears as a widget. If this parameter is top, the search form should appear on the top, over the main content. If this parameter is shop, the search form is prepared for usage in the shop.
mobile-enabled If this parameter is present, the template will (responsively) support mobile devices
full-width If this parameter is present, the template will be using the whole page
szm If this parameter is present, the template will have the szm/ivw tag available (tracking)

Tabs and footer

We've observed that most template changes are needed because of changes that only affect the tabs or footer. So we've added the possibility to download the tabs or the footer by themselves:
  • tabs supports the nav2 parameter (as described above)
  • tabs should correspond to the template-element NAV (see below)
  • footer should correspond to the template-element FOOTER (see below)
We propose that you separate the NAV / FOOTER elements into separate partials (html snippets) so you are able to update these individually.

Adapting this template to your application

If you take a look at the html source, you can see that we've insert comments around certain areas in the template, which look like this:
<-- <template-element data-section="[name]"> -->
  [some html]
<-- </template-element> /[name] -->

This allows you to do replace these lines with this regular expression:
Replace
  /<!--\s*(<\/?template-element[^>]*>)[^>]*>/
with
  [matched group 1]
This should convert the commented lines to 'real' tags and you can now feed the template to any html/xml processor and should have easy access to the sections surrounded by <template-element> tags.

Of course you can also choose to not go this route and adapt the template based on regular expressions (or do both processing steps).

To make your life easier, we provide a helper ruby gem that handles both processing steps.
Please ask us for github access and further instructions.

Available sections in the template

Important sections - you should handle those:
TITLE Around <title>
STYLESHEET_TAGS Around stylesheet tags in <head>
JAVASCRIPT_TAGS Around javascript tags - may appear multiple times
MINIMIZED_ASSETS Around minimized assets
REGISTER_LINK Around the link to register
LINK_TO_SHOP_ORDERS_DE (TODO) Around a link to the order page on the shop - should only be displayed...
NAV Around the (second-level) navigation
CONTENT Around the content - includes MAIN_CONTENT and optionally SIDEBAR_CONTENT
MAIN_CONTENT Around the main content
SIDEBAR_CONTENT Around the sidebar content
FOOTER Around the footer at the bottom of the page
LOGIN_STATUS Around the login status of the user: Includes both LOGGED_IN and NOT_LOGGED_IN - your application should only show one of these at the same time (based on the user's login status)
MOBILE_LOGIN_STATUS Around the login status of the user: Includes both MOBILE_LOGGED_IN and MOBILE_NOT_LOGGED_IN - your application should only show one of these at the same time (based on the user's login status)
LOGGED_IN A Section that is shown to users who are logged in
MOBILE_LOGGED_IN A Section that is shown to users who are logged in
NOT_LOGGED_IN A section that is shown to users who are not logged in
MOBILE_NOT_LOGGED_IN A section that is shown to users who are not logged in
AD_INITIALIZATION Around ad initialization code
AD_LEADERBOARD Around the leaderboard ad (top)
AD_SKYSCRAPER Around the skyscraper ad (right)
AD_MEDIUM_RECT Around the medium-rectangle ad (only applies to templates with sidebar)
AD_ABOVE_FOOTER Around the ad in the footer (bottom)

Sections you should consider to support:
APP_LINKS Around links to apps (appstores) <head>
PAGE_INFO Around window.Infos object in <head>
LOGIN_LINK Around the link to login
MOBILE_LOGIN_LINK Around the link to login
LOGOUT_LINK Around the link to logout
MOBILE_LOGOUT_LINK Around the link to logout
PROFILE_LINK Around the link to the profile
USERNAME Around the username
MOBILE_USERNAME Around the username
TERMS_OF_SERVICE_LINK Around the link to the terms of service
FOOTER_LINKS Around the footer links within the footer
SEARCH_FORM Around the dictionary search form
LOCALE_SELECT Around the locale selector (uses the links provided in LOCALE_LINKS)
LOCALE_LINKS Around the actual locale links (triggered by LOCALE_SELECT)
ALTERNATE_HREFLANG_LINKS Around the "alternate hreflang" links (for seo)

Sections for "nice-to-have" or cosmetic features:
META_TAGS Around meta tags in <head>
ICONS Around icon tags in <head>
UNREAD_MESSAGES Around the status of unread messages
UNREAD_MESSAGES_COUNT Around the count of unread messages
COPYRIGHT Around the copyright notice at the bottom of the page
YEAR Around the year in the copyright header
TRACKING Tracking - may appear multiple times

Informational sections:
AD_DEFEND Ad-Defend script
ASSET_GROUP Around a group of assets (stylesheets or javascripts) - contains ORIGINAL_ASSETS and MINIMIZED_ASSETS
ORIGINAL_ASSETS Around original assets - the purpose here is to hint at the used libraries (which are minimized in the corresponding MINIMIZED_ASSETS section)
INSTRUCTIONS Around instructions (for developers)

Thank you for reading.

Seite auf Deutsch | Български | Ελληνικά | English | Español | Français | Italiano | Polski | Português | Русский | Slovenščina | Srpski | Türkçe | 中文