<body class="pc3body">

Für das Element <body> darf kein Stil definiert werden. Dies könnte dazu führen, dass das Backoffice im Editor nicht mehr richtig angezeigt würde.

Es dürfen jedoch eine oder mehrere Klassen hinzugefügt werden.

<ul class="skiplinks">

Hier sind spezielle Links für den Barrierefreien-Zugang untergebracht. Mittels der Klasse "skiplinks" werden diese ausserhalb des sichtbaren Bereichs ausgegeben.

<div id="page-section">

Die Breite der Seite wird auf diesem Element mittels des Stilwertes "pagewidth" definiert. Entsprechend ist der Stilwert anzupassen.

Kann auf der Homepage mit der Klasse "mod-home" ergänzt werden, falls verwendete Includes anders dargestellt werden sollen. Entsprechend werden die Elemente/Klassen in der Stilverwaltung in diesem Kontext überschrieben.

<div id="page-header">

Die Elemente im Header können auch in eine andere Sektion der Seite verschoben werden. Es besteht kein direkter Kontext in der Stilverwaltung. Es kann also zB. das "<div id="language-nav">" auch in das "<div id="page-footer">" verschoben werden.

<div class="wrap">

<div id="logo">

<div id="meta-nav">

<div id="language-nav">

<div id="top-nav">

<div id="teaser"></div>

<div id="page-body">

Um Spalten-Layouts darzustellen, wird das entsprechende Toolbit verwendet. Dies stellt sicher, dass die Spalten in allen Browsern richtig dargestellt werden, dass die Ausgabe auch im PDF richtig ist und dass die Spalten auch im Editor vernünftig dargestellt werden.

Sollte für ein Design keine Spalte für die Navigation vorgesehen sein, kann das Layout-Toolbit ganz entfernt werden.

Da die einzelnen Spalten keine CSS-Stile haben können, sind Paddings oder Margins in einem Wrapper-Element zu definieren. In diesem Fall sind dies "<div id="nav-section">" und "<div id="content-section">".

<div id="nav-section-lay">

Die Breite dieser Spalte wird mittels des Stilwertes "mainnavwidth" definiert. Entsprechend ist der Stilwert anzupassen.

<div id="nav-section">

Die Breite dieser Spalte wird mittels des Stilwertes "mainnavwidth" definiert. Entsprechend ist der Stilwert anzupassen.

<div id="main-nav">

<div id="content-section-lay">

Die Breite dieser Spalte wird mittels des Stilwertes "contentcontentwidth" definiert. Entsprechend ist der Stilwert anzupassen.

<div id="content-section" class="content">

Die Klasse "content" ist sehr wichtig. Sie stellt den Kontext für die Baustein-Stile her und stellt sicher, dass diese auch im Editor richtig dargestellt werden.

Die Klasse wird immer da angewendet, wo Inhalt dargestellt werden soll. Grundsätzlich ist sie wie hier im Design definiert. Dies stellt sicher, dass alle Templates Stile in diesem Kontext verwenden. Entsprechend muss darauf geachtet werden, dass wenn ein neues Design angelegt wird, diese Klasse angegeben ist.

Include: $Content["contentId"]

<div id="content-header">

<div id="content-body">

<div class="main-col-lay">

Die Breite dieser Spalte wird mittels des Stilwertes "contentcolumnwidth" definiert. Entsprechend ist der Stilwert anzupassen.

<div class="main-col">

<div class="side-col-lay">

Die Breite dieser Spalte wird mittels des Stilwertes "contentcolumnwidthside" definiert. Entsprechend ist der Stilwert anzupassen.

<div class="side-col content-side">

Die zusätzliche Klasse "content-side" stellt einen eigenen Kontext für die Nebenspalte her, in der nach Bedarf einzelne Stile für diese überschrieben werden können.

<div id="content-footer">

<div id="page-footer">

<div id="signatur">

Elemente, welche zur Hauptstruktur gehören und in der Regel in einem Projekt vorkommen.

Elemente, welche nicht in jedem Fall verwendet werden.

Hilfselemente, welche für das Stylen/Positionieren benötigt werden.

Layout-Spalten-Toolbit, wird für die Darstellung von Spalten verwendet, haben aber keine CSS-Klassen.

Teil, welcher in der Regel im Template/Content ist.