Workshop: Adventskalender mit TYPO3

Wer kennt ihn nicht, denn alltäglichen Kalender dieser Tage, den Adventskalender?

Quelle: Miniatur Wunderland Adventskalender

Ein solcher Adventskalender lässt sich mit TYPO3 wirklich ausgesprochen leicht realisieren. TYPO3 bringt von Haus aus alle Funktionen mit, die man benötigt – nur für einen geeigneten, unterhaltsamen Content muß man immer noch selbst sorgen – aber das ist ja bei jeder Webseite der Fall.

Die Adventskalender-Seite

Wie allgemein üblich hat unser Adventskalender 24 Türchen, die sich nach und nach öffnen lassen. Durch Ausnutzung der Startfunktion für eine Seite lässt sich – im Gegensatz zu einem Schokoladen-Adventskalender allerding nicht schummeln und so muss der interessierte Besucher der Webseite halt jeden Tag wieder vorbeikommen.

Die Seiten-Struktur

Im Backend stellt sich der Seitenaufbau ganz einfach dar: Die Rootseite unseres Adventskalenders enthält den eigentlichen Adventskalender mit den Türchen, die Unterseiten beherbergen die „Überraschungen“ hinter den einzelnen Türchen.

Der Adventskalender

Der eigentliche Kalender ist eine Tabelle (ist für die Redaktion am einfachsten). Natürlich wäre auch ein Konstrukt aus Floats möglich, aber dafür müssten dann auf jeden Fall auch noch ein Webdesigner zu dem Projekt heran gezogen werden und der Advents-Kalender wäre mit hoher Sicherheit von einem Redakteur nicht mehr bearbeitbar.

Mittels des Tabellen-Assistenten kann eben auch ein Redakteur ohne jegliche HTML- und CSS-Kenntnisse den Kalender aufsetzten…

Das CSS für die Tabelle

.advent {width:530px;
  height:400px;
  background:url(path-to-pic/image.jpg) no-repeat center;
  text-align:center}
.advent .tr-even {background-color:transparent}
.advent .tr-odd {background-color:transparent}
.advent td {line-height:75px}

Über die Classe „advent“ werden die TYPO3-Standard-Formatierung für Tabellen überschrieben, damit die Tabelle zum einen die Hintergrundgrafik beherbergen kann und zum anderen die Kästchengrössen passen. Steht die Tabelle mit den Links, geht ein Screenshoot an die Grafik mit dem Auftrag, den Hintergrund zu gestalten.

Mittels dieses Screen-Shoots kann die Hintergrundgrafik sauber auf das Layout angepasst werden.

Die Unterseiten für die Türchen

Die Seiten werden mittels der Start-Funktion am richtigen Tag freigeschaltet. TYPO3 aktiviert eine Verlinkung erst dann, wenn die Seite auch sichtbar ist, somit geht automatisch jeden Tag ein neues Türchen auf. Der gesamte Content kann vorher vorbereitet werden.