Kostenloses TYPO3 Template mit Responsive Design

Version 7, basierend auf TYPO3 7 LTS

Hinweis: Aktualisiertes Template für TYPO3 Version 8 verfügbar

Inzwischen wurde unsere Template Vorlage für TYPO3 Version 8 (empfohlen für neue Projekte) aktualisiert. Die Anleitungen auf dieser Seite beziehen sich auf das Template für die TYPO3 Version 7.6 LTS

Einleitung

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

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.

Wichtig: Indizierung durch Suchmaschinen ermöglichen oder verhindern

Damit das Musterprojekt, welches von uns in jedem neuen Hostingpaket installiert wird, nicht durch Suchmaschinen wie Google indiziert wird, haben wir im Stammverzeichnis eine Datei namens robots.txt abgelegt.

In dieser Datei ist eine Angabe, die Suchmaschinen-Robots verbietet, die Seite zu indizieren.

Solange sich eine neue Website in der Entwicklung befindet, ist das sinnvoll.

Spätestens jedoch, wenn die Seite live geht, muss das geändert werden. Ansonsten wird die Seite nie bei Suchmaschinen gelistet werden.

Im Stammverzeichnis finden Sie auch eine Datei namens allow_robots.txt. Diese kann als Muster für eine korrekte robots.txt verwendet werden. Die einfachste Methode ist, die robots.txt zu löschen und die allow_robots.txt umzubenennen in robots.txt.

Das geht z.B. auf der Shell mit den folgenden Befehlen:

rm robots.txt
mv allow_robots.txt robots.txt

Alternativ können Sie die Umbenennung natürlich auch über ein FTP-Programm durchführen.

Sofern Sie die Google Search Console nutzen, ist es sinnvoll, nach dem umbenennen die Indizierung der Seite dort manuell anzustoßen.

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/

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

CSS anpassen

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

In der Datei musterprojekt_style.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

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).

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).

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

In der Datei musterprojekt_style.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).

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).

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.

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).

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).

Zusätzliche Sprachen 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

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

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.

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]-->
  ...
}

 

Aktualisiert: 05.10.2018