Eigenes Template erstellen - Einführung

Hallo,

ich finde Typolight klasse und sehe viele Vorteile gegenüber anderen CMS. Ich selber habe zwar im moment kleinere Probleme bin aber sehr motiviert, nicht zuletzt dank der super Community.

Aber nun zum eigentlichen Thema:

Ich habe sonst immer mit Typo3 gearbeitet und bin ein wenig verwirrt was die Template Umsetzung in Typolight betrifft. Ich habe mir die Videotutorials angeschaut und besitze auch das Handbuch zu TL.

Leider findet man im Buch kein Kapitel zur Erstellung eigener Templates. Das Videotutorial sah sehr vielversprechend aus. Allerdings ist dieses nicht wirklich umfangreich.

Gibt es sonst vllt noch irgendein Video, Beitrag, Tutorial oder sonst etwas das ihr mir ans Herz legen würdet?!

Was ich suche ist eigentlich ein Step-by-step Guide anhand einer Beispielseite.

Vielen Dank im voraus!

Hey

Also der eine Screencast von Leo (Wie man ein eigenes Template verwendet) ist doch sehr ausführlich. LINK
Viel mehr kann man nicht dazu sagen. Den Rest kannst du fast alles über css einstellen.

Wenn du ein spezielles Problem hast kannst du hier fragen.

Sawyer

Zitat:

---

Zitat von zozo

...und bin ein wenig verwirrt was die Template Umsetzung in Typolight betrifft. ...

---

Vielleicht kannst Du Deine Verwirrung etwas genauer formulieren. Dann können wir bestimmt Licht ins Dunkel bringen.

Hallo,

das Video kannte ich garnicht sondern nur das hier.

Hab mal eine kurze Auflistung erstellt:

- XHTML/CSS Template erstellen
- Dateien in "tl_files" packen
- index.html kopieren und "in fe_name.tpl" umbennen
- PAGE Header kopieren und WILDCARDS adden (head_section kommt aus fe_page.tpl)
- css einbinden und pfade anpassen
- Template-Datei in "templates" verschieben
- Frontend-Module erstellen
- Page-Layout erstellen
- Artikel erstellen

Was ich jezt nicht so ganz verstehe, wie formatiere ich mein Template. Kann man die style.css einfach importieren und Typolight weiß was zu tun ist oder muss ich mein css dann zerstückeln und einzeln eintragen!?

Der beste Weg aus meiner Sicht (wenn man möglichst wenig Arbeit mit Updates haben will):

1. Seitenlayout

• Layout-Titel eingeben
• Haken bei "Standardlayout" setzen
• Angaben für Kopf-/Fußspalte lasse ich erst mal noch aus.
• Bei der Spaltenkonfiguration einstellen ob es ein Einspalter-, Zweispalter- (mit Zusatzspalte links oder rechts) oder ein Dreispalter-Layout werden soll
• Danach für die Zusatzspalte(n) die gewünschte Breite angeben.
• "Eigene Layoutbereiche", "Stylesheets", "Newsfeed" und "Kalenderfeed" erstmal noch leer lassen
• Bei Frontend-Module die Mindesteinstellungen machen, damit man Inhalt eintragen kann. Wenn man vorhin nen Zweispalter mit Zusatzspalte links gewählt hat, würde das so aussehen:
  Artikel - Linke Spalte
  Artikel - Hauptspalte
• "Experten-Einstellungen" erstmal auslassen.
• Bei "Statisches Layout" z. B. einstellen:
  Gesamtbreite: 960 px
  Ausrichtung: zentriert
  
  Danach "Speichern und Schließen"-Button klicken

2. Module:

• "Neues Modul" anlegen und als Modultyp "Navigationsmenü" wählen
• Als Modulname "Navigationsmenü" eintragen
• Bei Startlevel 0 und bei Stoplevel 1 eintragen
  
  Danach "Speichern und Schließen"-Button klicken

3. Seitenlayout

• Beim Seitenlayout das wir vorhin angelegt haben in den Bearbeitungsmodus gehen.
• Bei "Frontend-Module" zusätzlich noch folgendes anlegen:
  Navigationsmenü - Linke Spalte
  
  Danach "Speichern und Schließen"-Button drücken

Jetzt sind die Grundvoraussetzungen geschaffen, damit man arbeiten kann. Legt einfach ein paar Seiten mit jeweils einem Artikel im Hauptbereich dieser Seite an. Schreibt in diese Artikel ein bisschen Testinhalt. Das was ihr nun auf der Website seht, ist die grundlegendste Basis des TYPOlight Layout-Frameworks.

Nun könnt ihr mit dem Stylesheet-Generator euer erstes Stylesheet anlegen und dieses im bestehenden Seitenlayout einbinden. Darin könnt ihr nun eure Definitionen für die Gestaltung unterbringen. Ändert am besten an der fe_page.tpl gar nichts, sondern versucht eure Gestaltung auf das bestehende XHTML aufzusetzen, das von TYPOlight für euch generiert wird.

PS: Diese Kurzanleitung hier ist seeeeehr rudimentär. Sie soll nur andeuten wie ich an sowas rangehe.

Danke für die ausführliche Antwort. Werd mich mal druchkämpfen =)