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: https://silbersaiten.helpdocs.com/contao

Video-Tutorial für Contao ab 3.4: https://youtu.be/0sQDOW8VOiI

Video-Tutorial für Contao ab 4.3: https://youtu.be/NG6R2Cmu_5w


copyright 2017 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 Bildern, JS, CSS und anderen 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

  1. führen Sie die Installation gemäß des Contao 3.5 Handbuches aus:
  1. Dateien auf den Server überspielen
  2. [contaopfad]/contao/install.php aufrufen
  3. Passwort vergeben
  4. Datenbank anschließen
  5. Benutzer erstellen
  6. ins Backend wechseln
  1. 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
  2. Importieren Sie die CTO Datei eines gekauften Contao Themes, indem Sie auf Themes->Theme Import klicken.

    Nun haben Sie die Module, CSS und Themeeinstellungen des Themas, aber nicht die Seiten,  Artikel und Elemente der Seite. Diese befinden sich im CTO Dump, der nach der Installation aus dem cto-internen Template-Verzeichnis nun eingelesen wurde und zur Installation bereit steht.
  3. Wechseln Sie wieder ins Install-Tool. Nun steht Ihnen unter dem Dropdown das SQL zur Verfügung, welches sich in Ihrer CTO Datei unter /templates befinden sollte.

    Dies können Sie auswählen und importieren. Damit überschreiben Sie die Datenbankstruktur und machen Sie der Demoseite gleich. Es werden Seiten, Module, Benutzer, Artikel und Elemente der Demoseite eingespeist, damit der Initialaufbau zur Verfügung steht. Damit überschreiben Sie auch den zuvor erstellten Benutzer.
  4. 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



    Wechseln Sie dann wieder ins Backend und melden Sie sich nun mit folgenden neuen Daten an:
    contemp
    contemp12345

    und ändern Sie das Passwort danach. Um zu überprüfen, ob alles korrekt gelaufen ist, klicken Sie die Elemente (Seitenaufbau, News/Events, Artikel) durch, um  festzustellen, dass der Aufbau nun der Demoseite gleicht. 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 in 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 Ihren 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.