CONTENIDO Forum

Ich bastle gerade an einer neuen Website (www.lehrstellenboerse.org). Da es sich um ein gemeinnütziges Projekt handelt, wollte ich mal YAML dafür nutzen. Im Grunde war es relativ einfach, bis auf die Tatsache, dass ich gleichzeitig ein zwei- und drei-spaltiges Layout nutzen wollte. Dazu musste ich alles doppelt anlegen. Aber jetzt scheint es zu gehen.

Wie geht man vor?

Schritt 1: YAML herunterladen und in den Ordner /cms/css reinlegen
Schritt 2: Drei Ordner samt Inhalt kopieren (yaml, patches und screen)
Schritt 3: HTML-Layout kopieren, in contenido einbauen und auch nutzen
Schritt 4: Ich nutze basemod.css, content.css & layout_vertical_listnav.css
Schritt 5: Eigene CSS-Anpassungen in style.css speichern

Gruss aus Bayern

LAYOUT:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Lehrstellenbörse der abakus Initiative für Bildung, Familie und Jugend e.V.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Lehrstellenbörse, Ausbildungsplatz, Lehrstellenplatz, Praktikumsplatz, Bobingen, Graben, Großaitingen, Kleinaitingen, Königsbrunn, Landsberg, Lechfeld, Oberottmarshausen, Untermeitingen, Schwabmünchen">
    <meta name="robots" content="index,follow" />
    <meta name="copyright" content="abakus Initiative für Bildung, Familie und Jugend e.V." />
    <meta name="author" content="Susanne Angeli, Rea Dylong, Wolfgang Kundler" />
    <meta name="revisit-after" content="7 days" />
    <link rel="stylesheet" type="text/css" href="css/layout_vertical_listnav.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="css/patches/patch_vertical_listnav.css" />
      <link rel="stylesheet" type="text/css" href="css/patches/patch_2col_left_13.css" />
    <![endif]-->
  </head>

  <body>
    <a id="top"></a>

    <div id="page_margins">
      <div id="page">

        <!-- HEADER START -->
        <div id="header">
            <div id="topnav">
              <!-- start: skip link navigation -->
              <a class="skip" href="#navigation" title="skip link">Skip to the navigation</a><span class="hideme">.</span>
              <a class="skip" href="#content" title="skip link">Skip to the content</a><span class="hideme">.</span>
              <!-- end: skip link navigation -->
              <!-- HILFSNAVIGATION START -->
              <container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container>
              <!-- HILFSNAVIGATION ENDE-->
            </div>
            <h1>Lehrstellenbörse</h1>
            <span>der abakus Initiative e.V.</span></div>
        </div>
        <!-- HEADER ENDE -->

        <!-- MENUENAVIGATION START #nav -->
        <div id="nav"> 
          <a id="navigation" name="navigation"></a>
          <div id="nav_main">
            <ul>
              <li id="current"><a href="http://www.lehrstellenboerse.org" title="Gehe zur Startseite der Lechfelder Lehrstellenbörse">Startseite</a></li>
              <li><a href="#" title="">Button 2</a></li>
              <li><a href="#" title="">Button 3</a></li>
              <li><a href="#" title="">Button 4</a></li>
              <li><a href="http://www.lehrstellenboerse.org/abakus-initiative/mitgliedsantrag/" title="Mach mit! Werde Mitglied und unterstütze unsere gemeinnützige Bildungsinitiative">Mach mit!</a></li>
            </ul>
          </div>
        </div>
        <!-- MENUENAVIGATION ENDE #nav -->

        <!-- CONTENT BEREICH START #main -->
        <div id="main">

          <!-- LINKE SPALTE START #col1 -->
          <div id="col1">
            <div id="col1_content" class="clearfix">
              <ul id="submenu">
                <li id="title">Hauptnavigation</li>
                <container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
              </ul>
              <container id="48" name="Login" types="Navigation" default="">Login</container>
              <container id="49" name="Newsletter" types="Navigation" default="">Newsletter</container>
              <container id="44" name="Suche" types="Navigation" default="">Suche</container>
            </div>
          </div>
          <!-- LINKE SPALTE ENDE #col1 -->

          <!-- RECHTE SPALTE START #col2 -->
          <div id="col2">
            <div id="col2_content" class="clearfix">
              <div id="imagecolumn">
                <container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
                <container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
                <container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
              </div>
            </div>
          </div>
          <!-- RECHTE SPALTE ENDE #col2 -->

          <!-- MITTLERE SPALTE START #col3 -->
          <div id="col3">
            <div id="col3_content" class="clearfix">
              <a id="content" name="content"></a>
              <container id="60" name="Navigationspfad" types="Navigation" default="">Navigationspfad</container>
              <container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
              <container id="12" name="Text" types="Content" default="">Content 1</container>
              <container id="15" name="Text" types="Content" default="">Content 2</container>
              <container id="22" name="Text" types="Content" default="">Content 3</container>
              <container id="24" name="Text" types="Content" default="">Content 4</container>
              <container id="26" name="Text" types="Navigation" default="">Content 5</container>
              <container id="28" name="Text" types="Navigation" default="">Content 6</container>
              <img src="images/grey.gif" width="98%" height="1" border="0" alt="" title="" />
              <p><br /><a href="#top"><img src="images/top.gif" width="12" height="12" alt="Nach oben ..." /></a></p>
            </div>
            <!-- IE column clearing -->
            <div id="ie_clearing"> </div>
          </div>
          <!-- MITTLERE SPALTE ENDE #col3 -->

        </div>
        <!-- CONTENT BEREICH ENDE #main -->

        <!-- FOOTER START -->
        <div id="footer">
          Dieses Layout basiert auf dem <a href="http://www.yaml.de/">YAML Framework</a>.<br />
          <a href="http://www.wallaby.de" title="Webhosting und Webdesign von Susanne Angeli" target="_blank">Webdesign von Susanne Angeli</a><br />
          <container id="99" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
        </div>
        <!-- FOOTER ENDE -->

      </div>
    </div>
  </body>
</html>

-> http://www.contenido.org/forum/viewtopic.php?t=17487

Auf unserer Homepage haben wir ein ca. 30-seitiges (kostenloses) PDF-Dokument veröffentlicht. Inhalt dieses Dokuments ist der praxisnahe Einblick, wie Sie das CSS-Framework YAML in das Content-Management-System contenido einbinden. Das Dokument beinhaltet obendrein noch eine gut bebilderte Installationsanleitung zu contenido und ein Kapitel Grundlagen zum Thema Cascading Style Sheets (CSS). Wir zeigen Ihnen die Umsetzung anhand der Homepage der gemeinnützigen abakus Initiative e.V. Dieser Verein betreibt die Webseite www.lehrstellenboerse.org.

Ich freue mich auf Rückmeldungen und Anregungen zu dieser Anleitung.

Gruss aus Bayern

Lernziele

* Integrieren von 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

* Wie tauschen Sie das Standard-Layout von contenido aus?
* Was beinhaltet das Download-Paket des YAML-Frameworks?
* Welche Dateien und Ordner des YAML-Verzeichnisses übertragen Sie?
* Welche Dateien benötigen Sie für die Realisierung (Download)?
* Wo bekommen Sie weiterführende Informationen im Internet?

Inhalt der PDF-Anleitung

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

Die oben erläuterte PDF-Datei ist auf dieser Seite ganz unten zu finden: wallaby.de

Gruss aus Kleinaitingen

PS: Ich bitte um Rückmeldungen, um das Skript zu verbessern. Falls etwas fehlen sollte einfach anfunken.

Hallo Community, ich bin neu im Thema Contenido/YAML und möchte ein YAML Framework in Contenido integrieren.
Diese Anleitung hier ist leider veraltet und die beschriebenen Schritte nicht mehr nachvollziehbar, weil die Dateien und Verzeichnisse eine komplett neue Strucktur haben als beschrieben.
Wer kennt einen Link zu einer aktuelleren Anleitung zur YAML Integration in Contenido?
Wohin muss ich die Dateien übertragen und wie nutze ich YAML nach der Datenübertragung?

Gruß Renatus

Hallo Renatus,

zuerst einmal willkommen im Contenido-Forum.

Ja bei Contenido hat sich einiges geändert seit der 4.6er Version. Leider ist mir kein neueres Tutorial für YAML mit Contenido bekannt.

Gruß aus Franken

Ortwin

Hi Renatus,

ich hatte früher auch mal die ein oder andere Page mit YAML gemacht. Davon bin ich aber komplett wieder ab. Weitaus besser finde ich TwitterBootstrap (zudem auch kostenfrei

)
Aber vielleicht hilft dir folgender Thread weiter, wenn es unbedingt YAML sein muss: http://forum.contenido.org/viewtopic.ph ... ML#p145712

Nochmal zu Bootstrap... es ist erschreckend einfach. Ich erstelle einen eigenen Unterordner im cms-Verzeichnis des Mandanten, und dort kommen die externen Scripte/Frameworks von Fremdanbietern rein. Diese kannst du dann einfach nach Bedarf aus deinem Layout heraus verlinken.

Code: Alles auswählen

        <link rel="stylesheet" type="text/css" href="external/bootstrap/css/bootstrap-min.css" />

CONTENIDO Forum

YAML goes contenido

YAML goes contenido

Installationsanleitung für YAML mit contenido

Re: YAML goes contenido

Re: YAML goes contenido

Re: YAML goes contenido