YAML goes contenido

YAML-Framework in contenido einbauen

In diesem Beitrag bekommen Sie einen praxisnahen Einblick, wie Sie das CSS-Framework YAML in das Content-Management-System contenido v4.8.15 einbinden.

Lernziele

  • Integrieren des CSS-Frameworks YAML in das Content-Management-System contenido

Bearbeitungsdauer

  • ca. 120 – 180 Minuten (Umfassende Kenntnisse mit CSS und contenido sinnvoll)

Wissenswertes über das YAML-Framework

 

Schritt 1 :: contenido Layout tauschen

Wenn Sie das YAML-Layout nutzen wollen, müssen Sie zu Beginn das Standard-Layout wechseln. Die Grundinstallation von contenido beinhaltet zwar bereits ein einfaches Layout, aber es fehlt natürlich der Verweis auf das neue Stylesheet (CSS), welches sich im head-Bereich befindet.

contenido Standard-Layout mit YAML

Abbildung 1: Neues Standard-Layout für contenido

 

Aufgabe: Standard-Layout in contenido austauschen!

Auf der Website von wallaby.de finden Sie die einzelnen Dateien für das grundlegende zwei- oder dreispaltige Standard-Layout.

  • 2-spaltiges Layout: HTML-Datei – standard-2spaltig.html
  • 3-spaltiges Layout: HTML-Datei – standard-3spaltig.html

Um das Layout zu tauschen, melden Sie sich als Administrator bei Ihrer Homepage www.domain.tld/contenido an. Öffnen dort die Layout-Bearbeitung über „Style > Layouts“ und ersetzen den kompletten Inhalt im rechten Fensterbereich bei Quelltext.

contenido Standard-Layout ersetzen

Abbildung 2: Quelltext ersetzen mit neuem Standard-Layout

Falls Sie ein neues Layout erstellen, müssen Sie die Template-Zuweisung bei „Style > Templates“ für alle Templates einzeln vornehmen.

 

Schritt 2 :: YAML-Framework kennenlernen

Zum besseren Verständnis erläutern wir Ihnen zunächst ein wenig den Inhalt des Download-Pakets. Dieses finden Sie auf der Homepage von www.yaml.de im Bereich „Download“. Die ZIP-Datei beinhaltet neben den Dateien des Frameworks eine gut beschriebene und ziemlich umfassende Dokumentation, einige Anwendungsbeispiele und auch ein paar hilfreiche Werkzeuge zur Layoutentwicklung. Wie Sie in Tabelle 3.1 sehen, beinhaltet die Datei einige Verzeichnisse.

Verzeichnisse Beschreibung
/documentation Hierin befindet sich die deutsche Dokumentation des Frameworks, die einen vollständigen Abzug der Online-Dokumentation darstellt
/examples Wie der Name andeutet enthält dieser Ordner einige Anwendungsbeispiele des YAML-Frameworks basierend auf verschiedenen Layouts.
/tools In diesem Ordner liegen Werkzeuge zur Layoutentwicklung. Der Ordner-Inhalt ist für eine korrekte Funktion des Frameworks nicht nötig.
/yaml Das ist der eigentliche Hauptordner mit alle wichtigen Dateien des Frameworks. Im Wesentlichen sind dies komplett fertige und sofort einsatzbereite CSS-Bausteine zur Layoutgestaltung.

Tabelle 3.1: Verzeichnis-Inhalte des YAML-Frameworks

Der Kern des YAML-Frameworks besteht aus einer vordefinierten XHTML-Struktur und extra CSS-Dateien mit unterschiedlichsten Funktionen. Ergänzend zu den CSS-Bausteinen beinhaltet das /yaml-Verzeichnis noch so genannte Dateivorlagen (Drafts). Diese benötigen Sie sowohl für die Anwendung des Frameworks als auch zur Gestaltung eigener Layouts. Die Hauptaufgabe der Vorlagen ist es Ihnen den Zugang zum Framework zu erleichtern und die grundsätzliche Arbeitsschritte zu vereinfachen.

central_draft.css (wird später umbenannt in /css/mylayout.css) ist die zentrale Stylesheet-Datei die alle im Layout benötigten CSS-Bausteine mittels @import-Rule einbindet. Die Datei iehacks.css bündelt alle relevanten layout- und strukturunabhängigen CSS-Anpassungen für die aktuellsten Versionen des Internet Explorers und ist für die browserübergreifende, einheitliche und fehlerfreie Darstellung des Basislayouts verantwortlich. Im Unterverzeichnis /yaml/navigation finden Sie noch diverse Navigationsbausteine für Menüs. Das YAML-Framework liefert hierzu unterschiedliche Listennavigationen mit:

  • nav_shinybuttons: Horizontale Navigation
  • nav_slidingdoor: Horizontale Navigation
  • nav_vlist: Vertikale Navigation

 

Schritt 3 :: YAML-Dateien hochladen

Mit unserem contenido-Layoutbeispiel geben wir Ihnen einen ersten groben Einblick in die universellen Anwendungsmöglichkeiten des Frameworks. Die für das Beispiel erforderlichen CSS-Bausteine finden Sie alle im Hauptordner /yaml.

Aufgabe: Dateien und Ordner übertragen!

Kopieren Sie zunächst den kompletten Ordner /yaml/ auf Ihren Webspace. Als Zielverzeichnis nutzen Sie bei contenido den Ordner /css. Ansonsten haben Sie noch folgende Aufgaben:

  • XHTML-Quelltext: Die XHTML-Datei /yaml/markup_draft.html beinhaltet die Vorlage für das Standard-Layout. Für das CMS contenido benutzen Sie bitte die von uns bereit gestellte Datei standard-layout.html. Diese Datei binden Sie unter „Style > Layouts“ ein.
  • Zentrales Stylesheet: Kopieren Sie die zentrale Stylesheet-Datei /yaml/central_draft.css in Ihren css-Ordner und benennen Sie die Datei um in mylayout.css.
  • IE-Patches: Kopieren Sie patch_layout_draft.css (Dateivorlage) aus dem Ordner /yaml/patches/ in den Ordner /css/mypatches/ und vergeben Sie der Datei den Namen patch_mylayout.css.
  • Bildschirm-Layout: Für das Screenlayout finden Sie im Verzeichnis /yaml/screen/ die beiden Vorlagen basemod_draft.css (zuständig für das Seitenlayout) und content_default.css (zur Gestaltung von Inhalten).

Die untenstehende Grafik verdeutlicht die so entstehende Datei- und Ordner-Struktur Ihres Projekts.

YAML-Ordnerstruktur

Abbildung 3: Datei- und Ordner-Struktur im CSS-Ordner von contenido

Der wichtige Teil der mylayout.css sieht in unserem Beispiel so aus wie in Abbildung 3.4. Für die Veränderung dieser Datei und den Aufbau der Ordnerstruktur sind die mitgelieferten Beispiele in /examples besonders hilfreich. Schauen Sie sich das ein oder andere Beispiel an, denn dadurch bekommen Sie ein Gefühl für die Thematik. Wer alles übersichtlicher gestalten will, der kann genauso gut alle Dateien gleich in den /css-Ordner kopieren, so sind diese dann auch direkt im Backend von contenido editierbar.

/* import core styles | Basis-Stylesheets einbinden */
@import url(yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(yaml/navigation/nav_shinybuttons.css);
@import url(yaml/navigation/nav_vlist.css);
@import url(myscreen/basemod_2col.css);
@import url(myscreen/basemod_2col_left_13.css);
@import url(myscreen/content_2col.css);

/* import print layout | Druck-Layout einbinden */
@import url(yaml/print/print_003_draft.css);

Abbildung 4: Inhalt der mylayout.css

Externe CSS-Dateien binden Sie bequem im -Bereich ein. Mit layout_vertical_listnav_2col.css nutzen Sie bspw. ein zweispaltiges Layout. In style.css befinden sich die eigenen Anpassungen. Die Datei mylayout.css basiert auf den mitgelieferten Beispielen des Frameworks.

<link rel="stylesheet" type="text/css" href="css/mylayout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="css/mypatches/patch_vertical_listnav_2col.css" />
   <link rel="stylesheet" type="text/css" href="css/mypatches/patch_2col_left_13.css" />
<![endif]-->

Abbildung 5: Einbinden externer CSS-Dateien

Selbstverständlich ist es dazu erforderlich vorab die YAML-Verzeichnisse samt Inhalt in den CSS-Ordner von contenido zu kopieren. Als sinnvolle Ergänzung empfehlen wir eine Erweiterung von Dodger77 (Username im Forum). Die Datei finden Sie unten auf dieser Seite im Download-Bereich. Mit dieser Anpassung bekommen Sie die Unterordner der Verzeichnisse „css“, „js“ und „templates“ im Backend angezeigt und können dort vereinfacht die enthaltenen Dateien bearbeiten.

 

 

 

 

Schritt 4 :: YAML-Paket herunterladen

  • 2-spaltiges Standard-Layout (TXT-Datei, 1 Seite)
  • 3-spaltiges Standard-Layout (TXT-Datei, 1 Seite)
  • Ordner in Styles-Scripts-Modul Templates (ZIP-Datei, ca. 20 kB)
  • YAML-Framework (ZIP-Datei, ca. 250 kB)
  • YAML goes contenido Anleitung (PDF-Datei, ca. 30 Seiten, ca. 1 MB)1 Grundlegendes
    1.1 Einführung
    1.2 Vorstellungsrunde
    1.3 Überblick

    2 Die Installation von contenido
    2.1 Dateien per FTP übertragen
    2.2 Datei-Rechte mit dem FTP-Tool setzen
    2.3 Installationstyp auswählen
    2.4 Datenbank-Anbindung konfigurieren
    2.5 Konfigurationsdatei „config.php“ erstellen
    2.6 Beispielmandant anlegen
    2.7 Konfigurationseinstellungen prüfen
    2.8 Erster Login im Backend

    3 YAML-Framework in contenido einbinden
    3.1 Standard-Layout austauschen
    3.2 Der Inhalt des Download-Pakets
    3.3 YAML-Verzeichnis übertragen

    4 Grundlagen zu Cascading-Stylesheets
    4.1 Formateigenschaften festlegen
    4.2 Definieren von CSS-Klassen
    4.3 Maßeinheiten und Farbangaben
    4.4 Zentrale CSS-Formatierung
    4.5 CSS-Eigenschaften festlegen

 

Weitere Informationen