Workshop: Adventskalender mit TYPO3

Tags: | | |

Wer kennt ihn nicht, denn alltäglichen Kalender dieser Tage, den Adventskalender?
Adventskalender 2007 auf der Miniatur Wunderland Webseite.
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
Seitenstruktur des Adventskalender im TYPO3-Backend

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 eigentlich TYPO3-Adventskalender wird mit einer Tabelle realisiert.

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.

Die Tabelle ist bequem mit dem TYPO3-Assistenten

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.

Tabellen-Layout ohne Hintergrund-Grafik

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

Die Unterseiten für die Türchen
Seitenoption in TYPO3

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.

Ein Kommentar zu “Workshop: Adventskalender mit TYPO3”

  1. cekay meint:

    Wow, vielleicht beschäftige ich mich irgendwann auch mal mit typo3, so ein Adventskalender scheint spass zu machen! Bisher hab ich nur fertige zusammengefasst 🙂

Hinterlassen Sie einen Kommentar

Text-Formatierung: Sie können diese XHTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> benutzen.

Comments links could be nofollow free.