Kostenloses TYPO3 Template mit Responsive Design

Die Ausgabe im Frontend wird per Typoscript gesteuert. In diesem Video erhalten Sie einen Überblick über die wichtigsten Typoscript-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

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

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;
}

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.

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.

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.

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 können auf zwei verschiedene Arten farblich hervorgehoben werden. Die Einstellung wird im jeweiligen Inhaltselement im Reiter "Erscheinungsbild" über die Auswahlbox "Layout" vorgenommen.

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;
}

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.

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.

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.

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.

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

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' 
   ),

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.

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

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

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.

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.

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

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