Kickstart – Contao Starthilfe

vom 23.02.2012 // 3 Kommentare

Von Zeit zu Zeit baue ich Websites mit dem Typo-Light Nachfolger Contao. Da die Installation und das Einrichten von Contao etwas… sagen wir gewöhnungsbedürftig ist, hier mein rudimentärer Kickstart, entlang dessen ich mich selbst immer orientiere.

Ich gehe davon aus, dass Contao verwendet wird, um ein individuelles Webdesign umzusetzen – also ein eigenes Theme erzeugt werden soll. Contao benötigt neben PHP eine MySQL Datenbank. PHP muss zur Zeit mindestens in der Version 5.2 vorliegen und MySQL in der Version 4.1, wobei wir für eine bessere Performance MySQL 5 empfohlen wird.

Schritt 1 – Installieren

  • Contao herunterladen und entpacken.
  • Die Datei „.htaccess.default“ in „.htaccess“ umbenennen (für Suchmaschinenfreundliche URLs)
  • hochladen
  • installieren (www.domain.de/contao/install.php)

Schritt 2 – Ordner anlegen

  • contao/tl_files – neuen Ordner anlegen „TockiLayout“ (hier kommen Content-Bilder rein)
  • contao/tl_files/TockiLayout – neuen Ordner anlegen „css-bilder“ (für Bilder, die ich für das css brauche)
  • contao/templates – neuen Ordner anlegen „TockiTemplates“ (später für eigene Templates)
  • contao/tl_files/TockiLayout – style.css anlegen
  • Optional: Screenshot des Entwurfs als PNG in „contao/tl_files/TockiLayout/css-bilder“

Schritt 3 – Neues Theme anlegen

Im Backend unter „Layout / Themes“: neues Theme anlegen

  • Theme-Titel: TockiTheme
  • Autor: Tocki
  • Ordner zuweisen: TockiLayout
  • Templates-Ordner: TockiTemplates
  • Bildschirmfoto zuweisen (Optional)

Speichern.

Schritt 4 – Neues Seiten-Layout anlegen

„Layout / Themes / TockiTheme“: Frame-Icon „Die Seitenlayouts des Themes … bearbeiten“ »
„Layout / Themes / TockiTheme / Seitenlayouts“: Neues Layout

  • Titel: Tocki Standard
  • Standardlayout: check
  • Kopfzeile: check – ggf Höhe angeben
  • Fußzeile: check – ggf Höhe angeben
  • Spalten: auswählen – ggf Breiten angeben
  • tl_files/tinymce.css ignorieren: check
  • Eingebundene Module: Artikel – Hauptspalte
  • Zusätzliche <head>-Tags: <link type=“text/css“ href=“tl_files/TockiLayout/style.css“ rel=“stylesheet“>
  • Statisches Layout: check
  • Gesamtbreite: Pixelbreite angeben

Speichern.

Schritt 5 – Module anlegen

„Layout / Themes / TockiTheme“: Zahnrad-Icon „Die Frontend-Module des Themes … bearbeiten“  »
„Layout / Themes / TockiTheme / Module“: Neues Modul

  • Titel: Header, Footer, …
  • Modultyp: eigenes HTML, Navigation…

// Pfad zu Bildern, die in dem angelegten Ordner „TockiLayout“ liegen, ist:
<img src=“tl_files/TockiLayout/header.jpg“ />

Speichern.

Schritt 6 – Module zuweisen

„Layout / Themes / TockiTheme“: Frame-Icon „Die Seitenlayouts des Themes … bearbeiten“ »
„Layout / Themes / TockiTheme / Seitenlayouts“: Standardseite bearbeiten

Eingebundene Module: die neuen Module den jeweiligen Spalten zuweisen.

Speichern.

Schritt 7 – Startpunkt anlegen

„Layout / Seitenstruktur“: Neue Seite anlegen

  • Seitentitel: „Name der Website“
  • Seitentyp: Startpunkt einer Website
  • Ein Layout zuweisen: check – TockiLayout
  • Seite veröffentlichen: check

// bei Mehrsprachigkeit: Datumsformat, Domainname, Sprachen-Fallback für weitere Sprache als zweiten Startpunkt angeben.

Speichern.

Schritt 8 – Startseite anlegen

  • Seitentitel: Start
  • Seitentyp: Reguläre Seite
  • Ein Layout zuweisen: ggf. ein gesondertes Layout für die Startseite zuweisen
  • Seite veröffentlichen: check

Speichern.

Schritt 9 – Inhalte für Startseite anlegen

„Inhalte / Artikel“: Stift-Icon „bearbeiten“ »
Neues Element hinzufügen

Letzter Schritt – Quellcode lesen

Jetzt die gerade erstellte Seite im Frontend anschauen und den Quellcode anzeigen lassen. Contao erzeugt von alleine für 95% aller Fälle das erforderlichen Boxmodel, dass sich über die in Schritt 2 angelegte style.css in „contao/tl_files/TockiLayout“ gestalten lassen.

Das ganze als Video

Auf Youtube hat schoolofweb zu jedem Schritt ein ausführliches Video-Tutorial verfasst, die ich gerne hier empfehlen möchte:

[youtube width=“650″ height=“390″]http://www.youtube.com/watch?v=mafZPK4dXwY[/youtube]

[youtube width=“650″ height=“390″]http://www.youtube.com/watch?v=4SOAJPXSbgI[/youtube]

[youtube width=“650″ height=“390″]http://www.youtube.com/watch?v=fgLR6Vltnyw[/youtube]

[youtube width=“650″ height=“390″]http://www.youtube.com/watch?v=Np9ztTSomLw[/youtube]

[youtube width=“650″ height=“390″]http://www.youtube.com/watch?v=_H5oZTY7znk[/youtube]

 



// Kategorie Freebie // Tags ,
// Kommentar schreiben
// Trackback URL
// Kommentare als RSS 2.0

3 Kommentare zu "Kickstart – Contao Starthilfe"

Schreibe einen Kommentar