Das Design ändern
Ich werde oft gefragt, warum das Design dieses Templates nicht etwas schicker, moderner oder "cooler" sein kann. Ich antworte darauf immer: Weil es einfach nicht wichtig ist. Es ist kein fertiges Template, das dazu dient, unverändert als Vorlage für eine produktive Webseite verwendet zu werden. Das Design ist deshalb unwichtig, weil es nur um DIV-container in einer HTML-Vorlage geht:
<div id="page_margins">
<div id="page">
<div id="col1_content" class="clearfix">
</div>
<div id="col3">
<div id="col3_content" class="clearfix">
<div id="ie_clearing"> </div>
</div>
</div>
</div>
</body>
</html>
Dieser kurze HTML-Code (zweispaltig), gespeichert in der Datei 2col_left_13.html würde völlig ausreichen, um als Grundlage für den folgenden Mapping-Prozess in TemplaVoilà verwendet zu werden. Die rot markierten Zeilen werden von TYPO3 später mit dynamischem Inhalt (der entweder aus TypoScript Code oder aus Inhaltselementen stammt) ersetzt.
Das Design wird ausschließlich über die importierten CSS-Stylesheets definiert und das, lieber Leser, müssen Sie sich selbst erstellen, denn jeder hat einen anderen Geschmack. Es wäre also völlig überflüssig, Ihnen ein festes Design mitzuliefern, weil es Ihnen möglicherweise gar nicht gefallen würde.
CSS Zen Garden macht es vor: Dort hat man sich zur Aufgabe gestellt, mit immer der selben HTML-Vorlage völlig unterschiedliche Designs zu entwickeln. Es sind unterdessen hunderte.
Das ist das Prinzip von YAML und das von CSS generell: Trennung von Inhalt und Design. Wenn Ihnen Ihr Design eines Tages nicht mehr gefällt, tauschen Sie es einfach aus. Ohne Ihre Inhalte auch nur einmal anzufassen.
Lesen Sie die YAML-Dokumentation, wie das geht, bevor Sie beginnen mit dem Template YAML für TemplaVoila zu experimentieren.
Wir haben hier also eine echte Arbeitsteilung: Sie sorgen für das Design und den Inhalt, YAML sorgt dafür, dass es in jedem Browser gleich aussieht und wir sorgen mit unserem TYPO3 Template dafür, dass Sie sich um die Technik (fast) nicht kümmern müssen, weil es von Anfang an funktioniert. Auch wenn das Standard-Design etwas "uncool" ist, zugegeben...
Das alternative Design
Ich bin Programmierer, kein Designer. Ich habe von Design soviel Ahnung wie die sprichwörtliche Kuh vom Eislaufen. Aber es gibt ja Dirk Jesse, der seinem Original YAML Paket ebenfalls ein Standard Design beilegt. Weil ich oft Schwierigkeiten habe, den Menschen zu beweisen, wie einfach ein Design mit YAML geändert werden kann, habe ich dem Template ein alternatives Layout (das vom Original YAML) beigelegt. Na gut, den Header habe ich unverändert gelassen, weil ich sonst ein neues Header- und Hintergrund-Bild hätte malen müssen und... Sie wissen ja: Die besagte Kuh.
Sie ändern weder Ihren Inhalt, noch den TypoScript Code. Sie brauchen sich noch nicht einmal in's TYPO3 Backend einloggen und den TYPO3 Cache löschen, sondern Sie tauschen lediglich drei Dateien aus:
- fileadmin/css/layout_2col_left_13.css
- fileadmin/css/screen/basemod.css
- fileadmin/css/screen/content.css
Fertig. Damit haben Sie folgende Änderungen durchgeführt:
- Aus dem Layout mit fixer Breite ist eines mit flexibler Breite geworden.
- Alle Schrift-Fonts und -Größen sind geändert.
- Die Button-Navigation ist jetzt jetzt nicht mehr Sliding-Door sondern die Shiny-Buttons werden angezeigt.
- Alle Farben der Links und einige Hintergundfarben sind geändert.
- Die Linien um die gesamte Seite sind weg.
- Der Teaser hat eine andere Hintergrundfarbe und ist umrandet.
Würde Ihr Web aus 10.000 Seiten bestehen, hätten Sie alle 10.000 in weniger als einer Minute geändert. Faszinierend, nicht wahr? Nicht mit gerechnet ist natürlich die Zeit, die Sie gebraucht haben um das Design zu erstellen. Doch dies müssten Sie immer tun. Ist das jedoch geschafft, haben alle 10.000 Seiten ein neues Gesicht. In genau der Zeit, die Sie brauchen, um drei Dateien per FTP auf Ihren Webserver hoch zu laden.
CSS in Reinkultur
Die strikte Trennung von Inhalten und Design ist also letztlich das, worum es bei YAML und diesem Template geht. Halten Sie diese Trennung stets ein, können Sie den selben Inhalt in verschiedenen Designs präsentieren. So wird mit YAML zum Beispiel dem Drucker ein anderes Design präsentiert als dem Bildschirm, dem Handy ein anderes als einem Screenreader.
Das Template YAML für TemplaVoila und der Einsatz eines CMS wie TYPO3 ermöglicht Ihnen das. Das Design bestimmen Sie.
Fertige Designs
Wenn Ihnen das Erstellen eines eigenen Designs zu mühevoll ist, können Sie fertige Templates auf Basis dieser Extension preisgünstig bei uns erwerben. Diese sind alle von professionellen Designern gestaltet und Sie können unmittelbar nach der Installation mit dem Erfassen Ihrer Inhalte beginnen.