Redaxo Template mit Yaml

Veröffentlicht am:   16. März 2008

Eine Redaxo Template mit dem CSS Baukasten Yaml zu erstellen ist eigentlich recht simpel. Um dieses Yaml Template zu bearbeiten sind jedoch einige Grundkenntnisse in CSS erforderlich. Nicht viel, aber das nötigste sollte man schon wissen, wie beispielsweise Farben ändern oder eine Hintergrundgrafik einfügen. Wenn dabei Fragen entstehen, vielleicht mal an geeigneter Stelle im Internet nach CSS Tutorial suchen oder eventuell auch hier in der Kommentarfunktion fragen.

Ihr Internet Auftritt in guten Händen
Webdesign und Webentwicklung
Planung, Erstellung, Verwaltung, Analyse und Support.

Bevor ihr beginnt ist es wichtig zu wissen, Yaml ist zwar kostenlos, aber es ist ein Rücklink entweder im Footer oder Impressum erforderlich. Ansonsten ist die Benutzung kostenpflichtig.

Also auf geht’s, mit Yaml ein Redaxo Template erstellen. Legen wir mal los!

Was wir benötigen ist erst mal ein laufendes Redaxo System und das Yaml Packet.

Die Downloadlinks:
Redaxo
Yaml

Ein laufendes auf Yaml basierendes Redaxo Projekt könnt ihr auf
www.das-allgaeu-online.de
sehen. Daneben habe dort auch im Blog Allgäu WordPress mit Yaml aufgebaut. Beide benützen die selbe CSS Dateien. Wenn ich also etwas ändere, wirkt sich das auf beide Systeme gleichzeitig aus. Nur eines ist getrennt, nämlich jeweils eine CSS Datei für Redaxo und WordPress mit den jeweiligen speziellen Anweislungen für beide Systeme.

Ich erkläre hier mal, wie ich das bei mir gehandhabt habe.
Kann natürlich jeder so machen wie er möchte. Der Nutzer sollte darauf achten, dass überall bei jedem @import die Pfade stimmen. Sonst wird das CSS nicht wirksam und die Website sieht eventuell grausig aus.

Ich habe das Yaml Packet in den Ordner CSS gesteckt. In dem CSS Ordner sieht bei mir dann wie folgt aus:

CSS – (Hauptorder)
yaml – (ordner)
patches – (Ordner)
screen – (Ordner)
style.css
style_2.css – (Datei)
subnav.css – (Datei)
rex.css – (Datei) für Redaxo
wp.css – (Datei) für WordPress

Wenn ihr nur Redaxo benützt, braucht ihr die letzte (wp.css) Datei natürlich nicht.

Der zweite und dritte Ordner patches und screen stammen aus dem Yaml Paket examples.

style.css – hier werden alle benötigten CSS Dateien reingeholt. Je nach Bedarf kann das auch anders sein. Es ist wichtig dass die Pfade genau stimmen.

@charset „UTF-8“;
@import url(yaml/core/base.css);
@import url(yaml/navigation/nav_shinybuttons.css);
@import url(subnav.css);
@import url(rex.css);
@import url(screen/basemod.css);
@import url(screen/format_3.css);
@import url(screen/content.css);
@import url(yaml/print/print_100_draft.css);

Im Redaxo Template steht dann:
< link href="./css/style.css" rel="stylesheet" type="text/css" />

Bei Yaml sind Beispiel Template dabei. Jeder benützt natürlich, die Vorlage, die er möchte. Einfach an den gewünschten Stellen den Beispieltext löschen und den Redaxo Code einfügen.

Fertig ..

Übrigens, bei Yaml gibt es nun auch einen YAML Builder, um sein eigenes Layout Online zusammenzustellen.

Verfasst von: Internet Blog

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.