YAML Templates in TYPOlight

Dieser Workshop beinhaltete die Erstellung von TYPOlight Templates mit dem YAML CSS-Framework.

The workshop was designed to create an overview on how to create TYPOlight templates using the YAML CSS framework.

Folien / Transparencies

Deutscher Foliensatz im PDF-Format (2,3 MB)
English transparencies PDF-Format (2.5 MB)

Screencast

Für den praktischen Teil der YAML-Template-Erstellung gibt es einen Screencast im H.264-Format. Dieses Format kann unter anderem mit dem kostenlos erhältlichen Apple Quicktime abgespielt werden. Ebenso möglich ist ein Abspielen des Screencasts mit dem Open Source Video Player VLC.

Bitte dreht die Lautstärke einigermaßen hoch, ich musste leider mit meinem eingebauten Notebook-Mikrofon arbeiten und habe das Notebook natürlich nicht direkt an den Mund gehalten :-)

Unfortunately the screencast is in german only. I am not sure if I will produce an english audio track as well. The screencast features the practical part of the YAML template workshop. It is recorded in H.264 format and can be played with Apple Quicktime or VLC video player.

The audio quality is a bit poor because I had to use the internal notebook microphone and I wasn't able to put my mouth directly in front of the microphone :-) so please turn the volume up (if you are able to understand german...).

YAML screencast

Screencast herunterladen / Download screencast (54 MB)

Verwendete Resourcen im Screencast / Screencast resources

Da der Screencast und die hier vorgestellten Arbeiten nicht mehr ganz aktuell sind, habe ich in meinem Doku-Wiki eine Anleitung zum Erstellen von YAML basierten Templates für TYPOlight verfasst. Ich würde dringend empfehlen, nur noch diese Anleitung zu verwenden und auf die hier vorgestellten Inhalte nach Möglichkeit ganz zu verzichten.

  • YAML-Homepage: www.yaml.de
  • YAML-Builder: builder.yaml.de
  • YAML Simple Project Example: www.yaml.de
  • Eigene YAML-Templates für die TYPOlight Navigation in system/modules/frontend/templates / Own YAML-templates for the TYPOlight navigation in system/modules/frontend/templates: yaml_navigation_templates.zip (nav_yaml.tpl, nav_yaml_vlist.tpl, 1,5 kB)
  • Erweiterung der nav_slidingdoor.css-Klasse / Extension of nav_slidingdoor.css
@charset "UTF-8";
/**
* Extension of nav_slidingdoor.css default stylesheet for TYPOlight CMS
 *
* (en) Added "trail" class definition for active mainmenus
* (de) "trail" Klassendefinition für aktive Hauptmenüeinträge hinzugefügt
 *
* @copyright       Copyright 2008, Helmut Schottmüller
 */

@media all
{
  #nav_main .trail {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: white url("../../yaml/navigation/images/sliding_door/round/left_on.gif") no-repeat top left!important;
    border: 0!important;
  }

     #nav_main .trail a,
    #nav_main .trail strong {
    /* (en) This image is mainly transparent */
    /* (de) Dieses Bild ist größtenteils transparent */
    background: transparent url("../../yaml/navigation/images/sliding_door/round/right_on.gif") no-repeat top right!important;
    color: #334!important;
    font-weight: bold!important;
    padding-bottom: 4px!important;
    padding-top: 5px!important;
  }
}

--- Helmut Schottmüller () 2008-04-25 09:22

screencast_yaml_preview.png - YAML screencast (118.7 KB) leo, 08/15/2008 07:56 pm

yaml_navigation_templates.zip - TYPOlight templates for YAML navigation (883 Bytes) hschottm, 11/18/2008 08:45 am

Also available in: HTML TXT