Kostenloses TYPO3 Template mit Responsive Design

Version 7, basierend auf TYPO3 7 LTS

Einleitung

TYPO3 Musterprojekt

Das TYPO3 Musterprojekt steht allen unseren Kunden kostenlos zur Verfügung. Sie können es auch als Basis für Ihre eigene Website verwenden.

Dabei kann das Musterprojekt beliebig angepasst werden. In den folgenden Videoanleitungen gehen wir auf die wichtigsten Punkte dabei ein.

Unterschiede zur Version 6

TYPO3 7 Backend
TYPO3 7 Backend

Das Musterprojekt für TYPO3 7 LTS unterscheidet sich im Frontend kaum von der Version für TYPO3 6.2. Tatsächlich haben wir am Design oder den Funktionen keine Änderungen vorgenommen.

Einiges hat sich dagegen "unter der Haube" geändert, da wir auch in der Programmierung auf die neuen Funktionen und Möglichkeiten von TYPO3 7 eingegangen sind.

Dieses Video zeigt einige Unterschiede zwischen den Musterprojekten Version 7 und 6.2.

Struktur der Typoscript-Templates

Die Ausgabe im Frontend wird per Typoscript gesteuert. In diesem Video erhalten Sie einen Überblick über die wichtigsten Typoscript-Dateien.

Alle verwendeten Typoscripts liegen in separaten, externen Dateien vor. Diese Dateien werden im Haupttemplate auf der Seite "Home" eingebunden.

Die Typoscript-Dateien finden Sie im Verzeichnis fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/

Includierte Typoscript-Dateien im Root-Template
Includierte Typoscript-Dateien im Root-Template
Typoscript-Dateien im Verzeichnis Typoscript
Typoscript-Dateien im Verzeichnis Typoscript

Verwendete CSS-Dateien

Die Darstellung des Musterprojekts wird über zwei CSS-Dateien gesteuert:

  1. bootstrap.css - CSS-Datei des CSS/HTML-Frameworks Bootstrap, auf welchem das Musterprojekt 6.2 basiert
  2. musterprojekt_style.css - Anpassungen für das Musterprojekt

Das Logo im Kopfbereich austauschen oder entfernen

Der Austausch des Logos im Kopfbereich lässt sich mit wenigen Schritten durchführen.

Pfad zur Logo-Datei in den Konstanten anpassen

Der Pfad zur Logo-Datei kann im Konstanten-Editor im Haupttemplate auf der Seite "Home" angepasst werden.

## Pfad/Datei: Logo der Seite, auch fuer Druckausgabe 
logoPathFile = fileadmin/jweilandnet_musterprojekt/Resources/Images/jweiland_logo.png
Konstanten im Root-Template bearbeiten
Konstanten im Root-Template bearbeiten
Pfad zur Logo-Datei anpassen
Pfad zur Logo-Datei anpassen

CSS anpassen

Falls Ihr Logo andere Abmessungen hat als das Muster-Logo, muss das CSS angepasst werden.

In der Datei musterprojekt_styles.css ab Zeile 60 wird für das Element .topheader eine Mindesthöhe definiert. Für das Musterlogo beträgt die Höhe 130 Pixel. 

Wenn ihr Logo größer ist, müssen Sie diesen Wert entsprechend erhöhen. 

.topheader {
  min-height: 130px;
  max-width: 720px;
  background-position: 100% 0;
  background-repeat: no-repeat;
}

Logo entfernen

TypoScript-Datei entfernen oder auskommentieren
TypoScript-Datei entfernen oder auskommentieren

Um das Logo zu entfernen, muss die eingebundene Typoscript-Datei lib.header.ts im Setup des Haupttemplates auf der Seite "Home" entfernt werden oder auskommentiert werden.

Bilder im Kopfbereich anpassen

Im Kopfbereich des Musterprojekts können Bilder angezeigt werden, die aus den Seiteneigenschaften der jeweiligen Seiten ausgelesen werden. Dabei werden diese Bilder auch auf Unterseiten vererbt.

Um ein Bild hinzuzufügen, bearbeiten Sie die Eigenschaften einer Seite. Klicken Sie dazu im Seitenbaum auf das Icon vor dem Seitennamen und wählen Sie im Kontextmenü "Bearbeiten aus" (1).

Im Reiter "Ressourcen" erstellen Sie eine "Neue Relation" (2) und wählen ein Bild im File-Selector aus (3).

Danach speichern Sie die Seite erneut ab (4).

(1) Seiteneigenschaften bearbeiten
(1) Seiteneigenschaften bearbeiten
(2) Im Reiter "Ressourcen" eine "Neue Relation" erstellen
(2) Im Reiter "Ressourcen" eine "Neue Relation" erstellen
(3) Im File-Selector ein Bild auswählen
(3) Im File-Selector ein Bild auswählen
(4) Das Bild wurde hinzugefügt. Anschliessend Speichern!
(4) Das Bild wurde hinzugefügt. Anschliessend Speichern!

Schriftarten und Farben verändern

In diesem Video zeigen wir, wie Sie die im Musterprojekt verwendeten Schriftarten und Farben, z.B. für Überschriften und Links, verändern können.

Zwar stehen diese Definitionen in der Datei bootstrap.css, wir empfehlen jedoch, individuelle Anpassungen in die Datei musterprojekt_style.css zu schreiben.

Schriftart ändern

Die verwendete Schriftart wird in der Datei

fileadmin/jweilandnet_musterprojekt/Resources/Css/bootstrap.css

ab Zeile 302 definiert:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

Wenn Sie z.B. nur die Schriftart ändern wollen, können Sie folgende Zeile in die Datei

fileadmin/jweilandnet_musterprojekt/Resources/Css/musterprojekt_style.css

schreiben:

body {
  font-family: "Tahoma", Helvetica, Arial, sans-serif;
}

In diesem Fall würde nur die Eigenschaft font-family überschrieben werden, alle anderen Eigenschaften des body-Elements blieben unverändert.

Schriftart und Farbe der Überschriften

Die Schriftart der Überschriften wird in der Datei bootstrap.css ab Zeile 453 definiert:

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
}

Um zum Beispiel die Schriftart und Farbe der Überschriften zu verändern, kopieren Sie diesen Code-Block in die Datei musterprojekt_style.css und nehmen hier die Anpassungen vor.

Im folgenden Beispiel wird als Schriftart Tahoma verwendet, als Farbe wird ein dunkleres Rot:

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Tahoma", Helvetica, Arial, sans-serif;
  color: #800;
}

Inhaltselemente farblich hervorheben

Inhaltselemente können auf zwei verschiedene Arten farblich hervorgehoben werden. Die Einstellung wird im jeweiligen Inhaltselement im Reiter "Erscheinungsbild" über die Auswahlbox "Layout" vorgenommen.

Bearbeiten Sie das gewünschte Inhaltselement und wechseln Sie in den Reiter "Erscheinungsbild" (1).

Bei der Auswahlbox "Layout" können Sie zwischen "Standard", "Hellgraue Box" und "Dunkelgraue Box" wählen (2).

(1) Inhaltselement bearbeiten
(1) Inhaltselement bearbeiten
(2) Layout auswählen
(2) Layout auswählen

Die Farben der beiden Boxen können per CSS verändert werden.

In der Datei musterprojekt_styles.css finden Sie ab Zeile 521 die entsprechenden Definitionen für die Klasse .layout-100 (Hellgraue Box) und ab Zeile 532 für die Klasse .layout-110 (Dunkelgraue Box).

.layout-100 {
    background-color: #f5f5f5;
    padding: 1.5em;
    margin-bottom: 1.5em;
}

.
.
.

.layout-110 {
    background-color: #414141;
    padding: 1.5em;
    margin-bottom: 1.5em;
    color: #fff;
}

Hinweis zu den Bildgrößen in Inhaltselementen

Um die Anzeige von Bildern im Layout zu vereinheitlichen und die korrekte Darstellung in einem Responsive Layout zu erleichtern, wurden in dem Inhaltselementen "Text & Media" die Felder zur Angabe der Breite und Höhe der Bilder deaktiviert.

Sie können diese Felder wieder aktivieren, in dem Sie in der Datei

fileadmin/jweilandnet_musterprojekt/Resources/TSConfig/page.tsconfig.ts

in den folgenden Zeilen die Werte auf 0 setzen (ab Zeile 51):

## Content Elements: remove width and height fields for responsive images
TCEFORM.tt_content {
    imagewidth.disabled = 1
    imageheight.disabled = 1
}

Allerdings kann es sein, dass durch diese Änderung Anpassungen in den CSS-Dateien notwendig werden.

Backend-Layouts verwenden

Das Musterprojekt bringt zwei verschiedene Layouts mit. In den Seiteneigenschaften können Sie über die Felder für die Backend-Layouts steuern, welches Layout verwendet wird.

Bearbeiten Sie die Seiteneigenschaften einer Seite (1). Im Reiter "Erscheinungsbild" finden Sie zwei Auswahlfelder für die Backend-Layouts. Hier können Sie das verwendete Layout für die aktuelle Seite sowie für untergeordnete Seiten wählen (2).

Bei einem leeren Auswahlfeld wird das Layout einer übergeordneten Seite geerbt (3).

(1) Seiteneigenschaften bearbeiten
(1) Seiteneigenschaften bearbeiten
(2) Backend-Layouts im Reiter "Erscheinungsbild" einstellen
(2) Backend-Layouts im Reiter "Erscheinungsbild" einstellen
(3) Bei leerer Auswahlbox wird von übergeordneter Seite geerbt
(3) Bei leerer Auswahlbox wird von übergeordneter Seite geerbt

Wenn Sie auf einer Seite mit bestehenden Inhalten ein anderes Backend-Layout wählen, kann es sein, dass die Inhaltselemente im Frontend und auch im Backend nicht mehr zu sehen sind.

Hier müssen Sie die Zuordnung zu den "Spalten" über das Listen-Modul korrigieren.

Wechseln Sie dazu in das Backend-Modul "Liste" (1).

In der Tabelle "Seiteninhalt" sehen Sie dann alle vorhandenen Inhaltselemente. Klicken Sie auf das Stiftsymbol, um ein Inhaltselement zu bearbeiten (1).

Im Reiter "Allgemein" können Sie bei Auswahlbox "Spalte" auswählen, in welchem Bereich des Layouts das Inhaltselement erscheinen soll (2) und (3).

(1) In das Listen-Modul wechseln
(1) In das Listen-Modul wechseln
(2) Im Bereich "Allgemein" die "Spalte" auswählen
(2) Im Bereich "Allgemein" die "Spalte" auswählen
(3) Im Bereich "Allgemein" die "Spalte" auswählen
(3) Im Bereich "Allgemein" die "Spalte" auswählen

Neues Backend-Layout erstellen

Das Musterprojekt bringt zwei vordefinierte Backend-Layouts mit: eines für die Startseite (Homepage) und eines für Unterseiten. Im ersten Video sehen Sie, wie Sie selbst ein neues Backend-Layout erstellen können.

Das neue Backend-Layout auswerten

In diesem Video sehen Sie, wie das neue Backend-Layout im TypoScript ausgewertet wird. Dazu legen wir eine neue Template-Datei an und sorgen dafür, dass die Inhalte an der richtigen Stelle im Frontend ausgegeben werden.

Falls Sie keine eigene Template-Datei verwenden, können Sie die Beispiel-Datei aus dem Video hier herunterladen.

Mehrsprachigkeit

Standardsprache anpassen

Die Einstellungen für die Standardsprache nehmen Sie in der folgenden Datei vor:

fileadmin/jweilandnet_musterprojekt_62/Resources/Typoscript/config.ts

## values for default language: German 
sys_language_uid = 0 
language = de 
locale_all = de_DE 
htmlTag_langKey = de

Zusätzliche Sprachen anlegen

Zusätzliche Sprachen können Sie über das Backend auf der Root-Seite „Musterprojekt“ (id = 0) anlegen. Die ID der neuen Sprache brauchen Sie in der weiteren Konfiguration im Typoscript.

Im Listen-Modul eine neue Sprache anlegen
Im Listen-Modul eine neue Sprache anlegen
Bezeichung der Sprache eingeben, zu verwendende Sprache auswählen, Flagge auswählen
Bezeichung der Sprache eingeben, zu verwendende Sprache auswählen, Flagge auswählen
ID der Sprache anzeigen und merken!
ID der Sprache anzeigen und merken!

Die Konfiguration weiterer Sprachen geschieht in der Datei:

fileadmin/jweilandnet_musterprojekt_62/Resources/Typoscript/lib.multilanguage.ts

Englisch ist bereits vordefiniert, ein Codeblock für eine weitere Sprache ist vorbereitet.

Die ID einer zusätzlichen Sprache können Sie als Konstante in der folgenden Datei hinterlegen:

fileadmin/jweilandnet_musterprojekt_62/Resources/Typoscript/lib.multilanguage.txt

Fügen Sie eine weitere Sprache hinzu, muss die Konfiguration der Extension RealUrl ebenfalls angepasst werden.

Öffnen Sie dazu die Datei typo3conf/realurl_conf.php und suchen Sie folgenden Abschnitt:

array( 
   'GETvar' => 'L', 
   'valueMap' => array( 
      'en' => '1', 
      'de' => '0' 
   ), 

Hier müssen Sie die weitere Sprache mit der entsprechenden ID hinzufügen.

Beispiel: weitere Sprache Französisch, ID = 2

array( 
   'GETvar' => 'L', 
   'valueMap' => array( 
      'fr' => '2', 
      'en' => '1', 
      'de' => '0' 
   ),

Menü zur Sprachumschaltung als Text- oder Flaggen-Variante

In der Standardeinstellung wird das Menü zur Sprachumschaltung als Text-Menü dargestellt. Ein zweite Variante ist die Darstellung von Landesflaggen.

Die Darstellungsart wird über die folgende Datei gesteuert (1):

fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/lib.multilanguage.ts

Um zur Flaggendarstellung umzuschalten, müssen Sie den letzten Codeblock in dieser Datei ab Zeile 79 mit den Zeichen /* und */ einkommentieren, damit der Block inaktiv ist und nicht ausgeführt wird (2).

(1) Datei lib.multilanguage.ts bearbeiten
(1) Datei lib.multilanguage.ts bearbeiten
(2) Codeblock ab Zeile 79 einkommentieren
(2) Codeblock ab Zeile 79 einkommentieren

Bitte beachten:

Das Flaggen-Menü ist nur zur Verwendung der deutschen und englischen Flagge vorbereitet. Wenn Sie andere oder zusätzliche Sprachen verwenden wollen, müssen Sie die Grafik anpassen, die zur Darstellung der Flaggen verwendet wird. Sie finden die Grafik flagsprite.gif im Verzeichnis:

fileadmin/jweilandnet_musterprojekt/Resources/Images/

Zusätzlich sind auch noch Anpassungen im CSS in der folgenden CSS-Datei notwendig:

fileadmin/jweilandnet_musterprojekt/Resources/Css/musterprojekt_style.css

Wir empfehlen daher die Verwendung der Text-Version des Sprachumschaltung-Menüs, welche auch standardmäßig aktiv ist.

Mehrsprachigkeit deaktivieren

Wenn Ihre Website nur eine Sprache verwendet, können Sie die Mehrsprachigkeit im Musterprojekt auch deaktivieren.

Sprachmenü ausblenden

Um die Anzeige des Sprachmenüs zu deaktivieren, gehen Sie in das Template-Backendmodul. Rufen Sie dort das Root-Template auf der Seite "Home" auf. Über die Auswahlbox am oberen Rand wechseln Sie in die Ansicht "Info/Bearbeiten" und klicken dann auf "Constants" (1).

Setzen Sie dann hier die Konstante langMenu = 0.

Dadurch wird zwar das Sprachmenü im Frontend nicht mehr angezeigt, die Funktionalität der Mehrsprachigkeit steht aber im Backend nach wie vor zur Verfügung (2).

(1) Konstanten im Root-Template bearbeiten
(1) Konstanten im Root-Template bearbeiten
(2) Konstante langMenu = 0 setzen
(2) Konstante langMenu = 0 setzen

Zusätzliche Sprachen löschen

Sprache löschen
Sprache löschen

Wenn Sie die zusätzliche Sprache (in der Standard-Installation Englisch) dauerhaft löschen möchten, wechseln Sie in das "Liste"-Backendmodul und wählen Sie die Seite "Musterprojekt" (id = 0) an.

Scrollen Sie im rechten Bereich nach unten, bis Sie den Bereich "Website-Sprache" sehen. Klicken Sie auf das Mülleimer-Symbol um die Sprache zu löschen.

Dadurch wird die zusätzliche Sprache gelöscht und steht im Backend nicht mehr zur Verfügung. Trotzdem müssen Sie wie oben beschrieben die Anzeige des Sprachmenüs deaktivieren, damit es im Frontend nicht mehr ausgegeben wird.

Kontaktformular anpassen

Empfängeradresse und Betreff der E-Mail ändern

In diesem Video sehen Sie, wie Sie die Empfängeradresse und den Betreff der E-Mail ändern, die durch das Kontaktformulars verschickt wird.

Eingabefelder ändern, hinzufügen und löschen

Das Kontaktformular im Musterprojekt wird über die in TYPO3 mitgelieferte System-Extension "form" realisiert. In diesem Video sehen Sie, wie Sie Eingabefelder des Formulars verändern, löschen oder neue hinzufügen können.

Eigenes Favicon

In diesem Video zeigen wir, wie Sie mit wenigen Handgriffen ein eigenes Favicon in das Musterprojekt integrieren können.

Für die Erstellung von Favicons gibt es auch viele Online-Generatoren, im Video wird als Beispiel favicon-generator.org verwendet.

Favicon hochladen

favicon.ico ersetzen
favicon.ico ersetzen

Das mitgelieferte Favicon favicon.ico liegt im Ordner

fileadmin/jweilandnet_musterprojekt/Resources/Icons/ 

und kann einfach ersetzt werden.

Manchmal kann es sein, dass die Browser ein neues Favicon nicht sofort anzeigen. Versuchen Sie, den Browser-Cache zu löschen oder testen Sie mit einem zweiten Browser.

Einbindung per Typoscript

TypoScript in der Datei page.ts
TypoScript in der Datei page.ts

Die Einbindung des Favicons erfolgt per Typoscript in der Datei

fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/page.ts

Hier können Sie bei Bedarf den Pfad und den Dateinamen der Icon-Datei anpassen.

Das Musterprojekt selbst installieren

Wenn Sie ein neues Hosting-Paket bestellen, erhalten Sie automatisch eine fertig installierte Version unseres Musterprojekts.

In diesem Video sehen Sie, wie Sie selbst das Musterprojekt installieren und als Basis für eine Website verwenden können.

Installationsschritte

1) Archiv-Dateien entpacken:

tar xzf musterprojekt-7.6.9.tar.gz
tar xzf typo3_src-7.6.9.tar.gz
(Die Versionsnummer muss ggf. angepasst werden!)

Das Verzeichnis muster-7lts umbenennen:

mv muster-7lts neuer-verzeichnisname

2) Über das Kundenmenü eine Datenbank anlegen

3) Datei typo3conf/musterprojekt.sql in die Datenbank importieren:

mysql -h 127.0.0.3 -u db_username -p db_name < musterprojekt.sql

4) In der Datei typo3conf/LocalConfiguration.php die Zugangsdaten zur Datenbank anpassen

5) Im Kundenmenü eine Domain/Subdomain auf das Projektverzeichnis zeigen lassen.
PHP-Version: 5.6LATEST, PHP-Edition: EXTENDED oder FASTCGI, Sichere Einstellungen: ja

6) Backend im Browser aufrufen: name-der-domain.de/typo3/
Benutzer: admin
Kennwort: muster

7) WICHTIG: 
Kennwort des Benutzers in den Benutzereinstellungen in ein sicheres Passwort ändern.
Auch das Installtool-Passwort ändern! (Standard-PW: muster)
Diesen Schritt auf keinen Fall vergessen, sonst kann sich JEDER an Ihrem Projekt als admin anmelden!

Tägliche Backups ausführen lassen

Wenn Sie ein neues Hosting-Paket bestellt haben, erhalten Sie automatisch auch eine aktuelle Version des Musterprojekts fertig installiert. Von diesem Musterprojekt wird täglich ein Backup der Dateien und der Datenbank erstellt.

Falls Sie selber ein weiteres Musterprojekt installiert haben, sollten Sie auch dieses Projekt zur täglichen Sicherung hinzufügen. 

Anpassungen bei Verwendung von SSL-Zertifikaten

Falls Sie Ihre Website mit einem SSL-Zertifikat versehen, wird Sie per https:// aufgerufen. Damit es hier nicht zu Warnmeldungen im Browser kommt, müssen Sie dafür sorgen, dass externe Resourcen ebenfalls per https:// geladen werden.

So wird beispielsweise in der Datei
jweilandnet_musterprojekt/Resources/Typoscript/page.ts
die JavaScript-Bibliothek jQuery geladen:

page.includeJSLibs {

  jquery = http://code.jquery.com/jquery-2.2.2.min.js
  ...
  jquery.allWrap = <!--[if lte IE 8]><script src="http://code.jquery.com/jquery-1.12.2.min.js"></script><![endif]--><!--[if gt IE 8]><!-->|<!--<![endif]-->
  ...
}

Bei Verwendung von https:// müssen auch diese Aufrufe per https:// erfolgen:

page.includeJSLibs {

  jquery = https://code.jquery.com/jquery-2.2.2.min.js
  ...
  jquery.allWrap = <!--[if lte IE 8]><script src="https://code.jquery.com/jquery-1.12.2.min.js"></script><![endif]--><!--[if gt IE 8]><!-->|<!--<![endif]-->
  ...
}

Alternative

Alternativ können Sie das Protokoll vor der URL auch einfach entfernen, dann ist es egal, ob die Seite per http:// oder https:// aufgerufen wird.

Am Beispiel der jQuery-Einbindung würde das so aussehen:

page.includeJSLibs {

  jquery = //code.jquery.com/jquery-2.2.2.min.js
  ...
  jquery.allWrap = <!--[if lte IE 8]><script src="//code.jquery.com/jquery-1.12.2.min.js"></script><![endif]--><!--[if gt IE 8]><!-->|<!--<![endif]-->
  ...
}