Contao conTemps Dokumentation

Einweisung in den allgemeinen Aufbau und Weiterarbeit mit den
Contao Themes von silbersaiten.

Installationsangaben relevant für Contao ab v. 3.4

FAQ

Offizielles Contao 4 Handbuch

Video-Tutorial für Contao ab 3.4

Video-Tutorial für Contao ab 4.3

copyright 2017-2020  silbersaiten.de

Packungsinhalt

1. ZIP-Kennung
   nach dem Erhalt des Themes stehen Ihnen mehrere ZIP Dateien zur Verfügung. Aus dem Namen können Sie die Verwendung leicht nachvollziehen:
   

Die Updates beziehen sich in den meisten Fällen auf Updates in der Datenbankstruktur und einige Verbesserungen des Themes an sich, die nur in den neuen Releases zur Verfügung stehen. Für Ihre Contao Version nehmen Sie die größte c-Kennung. Meistens funktioniert eine Datei für Contao 3.5.12 auch für 3.5.14. In anderen Fällen kontaktieren Sie bitte den Support unter support@silbersaiten.de

2. Inhalt der ZIP-Datei
   Die ZIP Datei besteht aus drei weiteren Dateien: CTO, SQL und TXT
   
   Zum Importieren benötigen Sie nur die CTO Datei. Notfall-SQL Dump können Sie direkt über phpMyAdmin importieren, falls der Import aus irgendwelchen Gründen nicht funktionieren sollte.
3. Aufbau der CTO-Datei.
   
   Die CTO Datei kann mit einem ZIP Extraktor geöffnet oder angesehen werden. Sie besteht aus den Dateien und Anweisungen, die für den Aufbau des Themes relevant sind. Es sind im Wesentlichen Dateien, die sich unter files[themename] befinden, also Bilder, JS, CSS und andere Dateien.
   
   Der Ordner Templates enthält die angepassten Templates (später zu finden unter themes -> templates) und die Datei mit dem SQL Dump, die später aus dem Installtool zu erreichen sein wird.
   
   

Installation

es gibt zwei Wege, den Inhalt der Datenbank für Ihre Contao Installation aufzusetzen.

1. über das Aufspielen des Dumps im Install Tool
2. direkter Import über phpMySQL

der erste Weg funktioniert nur bedingt und nur dann, wenn Ihre Contao Version exakt mit der Themeversion übereinstimmt. Wenn Sie z.B. Contao 4.5 haben, das Ihr gekauftes Theme aber von Contao 4.3 erstellt wurde, wird es nicht möglich sein, wegen kleinerer Abweichungen in der DB-Struktur den ersten Weg zu gehen und den Import über das Installtool zu machen.

Es wird daher empfohlen, immer den Direktimport über phpMySQL zu machen, dieser Weg ist sicherer und führt immer zum Erfolg.

In beiden Fällen müssen Sie erst

• die Installation von Contao abschließen und
• die Datenbank verbinden.

erfolgreiche Beispielkonfiguration mit der Installationsaufforderung

1. nach erfolgreicher Installation wechseln Sie bitte ins phpMyAdmin, wählen Sie die Zieldatenbank und importieren Sie die beiliegende SQL Datei
   
   
   
   
2. Nun müssten Sie sich im Backend mit dem User einloggen, den Sie aber aus Sicherheitsgründen erst über die Datenbank aktivieren müssten. Suchen Sie einfach nach der Tabelle tl_user und dort nach dem Eintrag contemp und der Zeile disable und löschen Sie die 1
   
   
   
3. danach gehen Sie bitte in das Install Tool und verbinden Sie die Datenbank, indem Sie den User, den DB Namen und das Passwort eintragen. Danach erhalten Sie eine Liste mit DB-Einträgen, due geupdatet werden müssen. Wählen Sie sie gruppenweise aus (um Überschneidungen zu vermeiden) und sagen Sie OK.
   
   Wechseln Sie nun ins Contao Backend und Loggen SIe sich mit
   User: contemp
   PW: contemp12345
   ein

4. erweitern Sie, wenn nötig, die Uploadgrenze für Ihre Dateien auf über 2 MB. Gehen Sie unter Einstellungen auf Datei-Uploads -> Maximale Dateigröße und ändern Sie den Wert, indem Sie einfach eine 0 hinter die 2 setzen
   

5. Importieren Sie die CTO Datei eines gekauften Contao Themes, indem Sie auf Themes -> Theme Import klicken.
   
   
6. Stellen Sie nun die eingefügten Ordner unter “Dateiverwaltung” auf “öffentlich”
   

7. Die Seitenstruktur müsste in Etwa so aussehen:
   

Damit ist die Installation abgeschlossen!

Template-Aufbau

Einbindungen diverser Helfer in ConTemps Contao Templates

Bootstrap Spalten-Aufbau

Was ist Bootstrap?

Bootstrap ist ein kostenloses, von Twitter entwickeltes CCS-Framework, welches eine Reihe von grundlegenden CSS-Stylesheets, JavaScript-Plugins und Weiteres bietet. Wir nutzen es hauptsächlich als Grid-System und für das Responsive Webdesign. Weitere Infos zu Bootstrap hier.

Wie wird Bootstrap eingebunden?

Bootstrap besteht bei uns aus der bootstrap.css, bootstrap.js sowie bootstrap.min.js

Die bootstrap.css wird im Backend unter Themes – externe Stylesheets ausgewählt, wie auch alle anderen CSS-Dateien und ist somit schnell eingebunden. Die bootstrap-Dateien selber werden nicht von uns verändert.

Wie wir Bootstrap nutzen

Grid system allgemein

Sowohl Artikel als auch einzelne Elemente bekommen bootstrap-Klassen zugeteilt. Teilweise direkt in den Templates oder auch im einzelnen Element, wo es besonders einfach ist das Bootstrap-Grid zu verändern.

Alle Reihen müssen sich zunächst in einem Container befinden bzw. .container-fluid für die ganze Bildschirmbreite. Wir haben dafür vorgefertigte Templates erstellt. Wenn Sie zum Beispiel einen neuen Artikel erstellen möchten und die Inhalte über den ganzen Bildschirm laufen lassen wollen, wählen Sie das Template mod_article-fullwidth aus. Für einen normalen Aufbau mit zum Beispiel nur Fließtext wählen Sie mod_article und wenn Sie mehrere Elemente nebeneinander stehen haben, wählen Sie  mod_article_multicols, um Abstände an den Seiten zu vermeiden, die von bootstrap automatisch erstellt werden, wenn sich mehrere Inhalte in einem Container befinden.

Spalten-Aufbau

Bootstrap wird mit einem 940 Pixel breiten, zwölfspaltigen Grid-Layout ausgeliefert. Das Grid-System ermöglicht das Bedienen der Seite auf Mobiltelefonen, Tablets sowie Computer mit unterschiedlicher Screen-Auflösung, da sich die Breite der Spalten automatisch an die Fensterbreite des Gerätes anpasst.

Bootstrap-Klassen, die häufig verwendet werden

Für große Computerbildschirme ist die Klasse .col-lg- zuständig. Sie regelt die Container-Breite von 1170px

Kleinere Bildschirme, zum Beispiel bei Laptops, werden von der Klasse .col-md- geregelt mit einer Container-Breite von 970px

Für Tablets verwenden Sie .col-sm- (750px) und für Mobiltelefone .col-xs- (automatische Container-Breite)

.pull-left bewirkt, dass sich das Element innerhalb des Containers ganz links befindet

.pull-right bewirkt, dass sich das Element innerhalb des Containers ganz rechts befindet

.text-center bewirkt, dass sich der Text innerhalb des Containers mittig befindet

.row kann benutzt werden, um horizontale Spaltengruppe zu erstellen

Mögliche Aufteilung einer Seite mit zwei Spalten und mehreren Elementen pro Spalte

Mögliche Aufteilung einer Seite mit zwei Spalten und mehreren Elementen pro Spalte,. In einer Spalte kann per InsertTag ein Element eingebunden werden, was seinerseits weitere Elemente ausgibt.

Mögliche Aufteilung einer Seite mit zwei Spalten und mehreren Elementen pro Spalte

Beispiele

Nehmen wir an, Sie möchten zwei Bilder in einer Reihe haben. Da immer von 12 Grids ausgegangen wird, teilen Sie 12 durch zwei, dann muss Ihre Klasse lauten: .col-lg-6.

Wenn Sie vier Elemente in einer Reihe haben wollen, nutzen Sie die Klasse .col-lg-3. Oder wenn Sie möchten, dass auf Tablets nur noch zwei in einer Reihe angezeigt werden und auf dem Smartphone nur noch ein Element, um eine gute Übersicht zu gewährleisten, verteilen Sie die Klassen: .col-lg-3 col-sm-6 col-xs-12

Weitere Links zu Bootstrap:

https://www.youtube.com/watch?v=4gpJK_uRUrs

http://www.w3schools.com/bootstrap/default.asp

http://holdirbootstrap.de/css/

Font Awesome Icons

Was ist Font Awesome?

Font Awesome ist ein kostenloses Icon-Font-Set mit über 370 Icons, die sich leicht einbauen und mit CSS anpassen lassen. Ein weiterer Vorteil dieses Icon-Sets ist, dass die Icons unendlich und verlustfrei skalierbar sind.

FontAwesome im Internet

Weiterführendes zu den Icons und deren Einbindung finden Sie unter http://fontawesome.io/icons/

Hier finden Sie auch die Iconnummern und -namen zur Einbindung weiterer Icons in Ihrem Auftritt.

Welche Font Awesome Version verwenden wir?

Aktuell verwenden wir die Version 4.2.0, bei älteren Themes dementsprechend auch eine ältere Font Awesome Version. Wir aktualisieren Font Awesome nicht regelmäßig, da uns zu Demo-Zwecken die Auswahl an Icons ausreicht, Sie können aber selbst die neuste Version einbinden, falls nötig. Hier finden Sie die Übersicht aller Icons sowie die neu hinzugekommenen. Benötigen Sie ein Update, laden Sie sich hier das neuste Font-Set runter und binden es wie folgt ein:

Gehen Sie unter Dateiverwaltung in den Ordner /fonts und ersetzen Sie die Dateien durch die aus der aktuellen Version.

Ersetzen Sie im Theme-Ordner css die bestehende font-awesome.css durch die neue und stellen Sie sicher, dass sie im Backend unter Themes – externe Stylesheets angezeigt wird.

Beispiele zur Einbindung der Font Awesome Icons

Mit HTML

Sie können ein beliebiges Icon zum Beispiel direkt in einen Text integrieren. Das würde folgendermaßen aussehen: <p><em class="fa fa-desktop fa-2x"> </em></p>

Wichtig dabei ist, dass der Code von einem <p> Tag umgeben ist. Die einzelnen Icon-Bezeichnungen finden Sie auf der Font Awesome Seite. fa-1x, fa-2x, fa-3x etc. ist dabei optional und bestimmt die Größe der Icons. Wenn Sie das weglassen, erscheint das Icon in der kleinsten Größe.

Mit CSS

Sie können die Font Awesome Icons auch über CSS mithilfe von :after und :before einbinden. Bei after erscheint das Icon hinter einem Element, wie zum Beispiel einer Überschrift, bei before davor.

Das könnte dann so aussehen:

.headline:before {

    font-family: FontAwesome;

    content: "\f107";

    font-size: 23px;

    margin-right: 10px;

}

Die Unicodes (also was unter content stehen muss) entnehmen Sie ebenso der Icon Liste auf der Font Awesome Seite.

Google Fonts

Wie werden Google Fonts eingebunden/wie können Sie die ersetzen?

Gehen Sie auf https://www.google.com/fonts und suchen Sie eine passende Schrift aus. Gehen Sie dann in das Contao Backend in Themes > Seitenlayouts bearbeiten > Layout bearbeiten und fügen Sie unter Google-Webfonts den Namen und die gewünschten Schriftdicken durch Kommatrennung ein. Zum Beispiel: Roboto:300,400

Sie können auch mehrere Schriftarten einbinden, diese müssen nur durch | getrennt werden. Das würde dann so aussehen: Roboto:300,400|Roboto+Slab:400,700 (ohne Leerstellen)

Dann gehen Sie in die design.css und ändern ganz oben bei body – font-family: die Schriftbezeichnung sowie nach font-weight die Schriftdicke. Sie können auch zum Beispiel der h1-Überschrift eine andere Schriftfamilie zuteilen. Als Beispiel:

h1 {

    font-family: 'Roboto Slab', sans-serif;

    font-size: 32px;

    font-weight: 400;

}

Einsatz in Contao

Einsatz von InsertTags

Wie ist der Header/Footer aufgebaut?

Der Header und Footer ist zunächst mal mit allen Inhalten als Artikel angelegt. Die ID des Artikels ist mit einem Modul verbunden, in dem ein eigener HTML-Code steht. Eingebunden wird die ID mit einem InsertTag {{insert_article::ID}}

Wie kann man InsertTags noch verwenden?

Sie können auf diese Weise beliebige Artikel erstellen. Wenn Sie zum Beispiel eine rechte Spalte mit einem Kontaktformular auf mehreren Seiten haben möchten, erstellen Sie einen Artikel mit den gewünschten Inhalten, legen ein Modul dafür an und dann können Sie in andere Artikel reingehen und ein HTML-Element erstellen mit folgendem Code:  <div class="col-lg-4">{{insert_article::ID}}</div>

Weiteres zu Insert Tags

Weiterführende Infos zu insert Tags finden Sie unter

https://docs.contao.org/books/manual/3.4/de/04-inhalte-verwalten/inserttags.html

Templates

Wo befinden sich geänderte Templates?

Die durch das Theme modifizierten Templates befinden sich in Layout/Templates/[themename]

Worin besteht die wesentliche Anpassung?

Die Anpassung besteht im Wesentlichen durch die Anreicherung der HTML Ausgabe mit bootstrap-relevanten Anweisungen.

Beispiel downloads.html

Beispiel mod_article

Wie wird auf die veränderten Templates verwiesen?

Nehmen wir das Modul Events, was auf einem leicht abgeänderten Template aufbaut

hier sehen wir, dass nicht das Standard Template, sondern das aus unserem Verzeichnis (in diesem Fall smart) verwendet wird. So können Sie bei jedem Modul oder Contao-Element in den Einstellunge feststellen, ob ein Originaltenplate oder eins aus dem Theme-Verzeichnis verwendet wird.

Wie kann man die veränderten Templates weiter anpassen?

Wie in Contao üblich: unter templates/themename befinden sich alle veränderten Templates

Mit dem Button steht Ihnen der HTML-Code zur Verfügung

CSS

Wo ist das externe und interne CSS eingebunden?

Das ist in der Anfangsgrafik sichtbar, die sich direkt nach dem Installationskapitel befindet. Unter themes-Einstellungen können Sie die Dateien und Reihenfolge der internen und exrernen CSS Dateien festlegen. Die internen Dateien (Einträge) müssen sich dabei unter [theme]->CSS befinden

Die externen können Sie nach Belieben unter files/[themename] ablegen. Üblich ist es das Unterverzeichnis /css zu verwenden.

Animate

Wo sind die Animationen eingebunden?

Die Animationen befinden sich im Theme-Ordner und bestehen aus zwei Dateien: animate.js und animate.css

Wie können Sie die Animationen verwenden?

[demoseite]/index.php/animationen.html

hier gibt es eine Live Vorschau aller zur Verfügung stehenden Typen

Animiert werden kann jedes Objekt in Contao, dem Sie eine CSS Klasse vergeben können.

Container, Artikel, Button, Eingabefeld…

Sie können die bestehenden Effekte auf der Seite “Animationen” aus unseren Themes entnehmen. Aus dieser Liste kopieren Sie den gewünschten CSS-Code in Ihren Artikel oder in ein Element hinein.

der obligatorische Stile heißt animated.  Das initiiert, dass das Element einer Animation unterliegt. Danach folgt die genaue Definition des Animationstyps für das Element.

Header-Bilder

Legen Sie einen neuen Artikel an und wählen Sie dabei in den Einstellungen des Layoutbereiches, dass er in der Kopfzeile angezeigt werden soll.

Möchten Sie, dass Ihr Bild über die ganze Bildschirm-Breite geht, dann wählen Sie in den Template-Einstellungen “mod_article_fullwidth” aus. Soll es nur über die Breite des Containers laufen, dann wählen Sie “mod_article”.

Legen Sie in dem erstellten Artikel nun ein Inhaltselement an und wählen Sie Ihr gewünschtes Bild aus:

Und speichern. fertig!