Zum Beginn der "CMS-Syntax Elemente"

Bei der "CMS-Syntax" handelt es sich um eine eigens entwickelte, mozilo-interne Befehlssprache.
Sie dient dazu Elemente wie z. B. Bilder und Links auf Inhaltsseiten zu platzieren und auszurichten, oder Texte zu formatieren.

Sämtliche CMS-Syntax Elemente sind nach bestimmten Regeln beliebig miteinander verschachtelbar.
Eine Anleitung dazu gibt es im Kapitel: Editor → CMS Syntax Regeln >

Im Admin-Tab "Einstellungen" können unter "Syntax-Einstellungen" per CSS und html selbst definierte Syntax-Elemente hinzugefügt werden.

Durch Voranstellen eines Zirkumflex (Hochdach) ^ wird das folgende Zeichen geschützt und vom System als normales Textzeichen interpretiert.
Zum Beispiel eckige und geschwungene Klammern, sowie der senkrechte Strich [ | ] { } sind bei moziloCMS Bestandteil von Syntax Elementen.
Kommen diese Zeichen im normalen Seitentext vor, müssen sie mit einem vorangestellten Hochdach ^ geschützt werden ( z.B. ^[ ).
Ansonsten kann es sein, dass Mozilo sie als Syntaxzeichen interpretiert und es zu Fehlanzeigen kommt.

CMS-Syntax Elemente

Ein Klick auf das Icon springt direkt zur jeweiligen Erklärung:

Alle Befehle, die bei der Seitengestaltung benötigt werden, sind in der CMS-Syntax Leiste des Editors als Schaltflächen vorhanden.

Nach Druck auf eine Schaltfläche erscheint der entsprechende CMS-Syntax Befehl an der Cursorposition im Arbeitsfenster des Editors.
Bezieht sich ein Befehl auf ein Inhaltselement, so wird es zwischen diesen beiden Zeichen | hier das Inhaltselement ] eingefügt.

Inhaltselemente werden auf folgende Weise eingefügt:
Per Eingabe oder aus der Zwischenablage – z. B. Texte, Internetadressen, Mailadressen
Per Auswahl aus den Selectboxen – z. B. Bilder, Dateien, Links zu anderen Inhaltsseiten, Plugins

Wird zuerst das Inhaltselement platziert und vollständig markiert, dann fügt sich anschließend auf Klick das Syntax-Element korrekt hinzu.

Links

Externer Link:

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[link| ] Öffnet einen Internet Link [link|http://www.mozilo.de/] http://www.mozilo.de
[mail| ] Öffnet den E-Mail Versand zur eingetragenen Adresse [link|mail@server.de] mail@server.de

Im Admin-Tab "Einstellungen" kann festgelegt werden, ob externe Links im gleichen, oder in einem neuen Browserfenster geöffnet werden.
Bei Internetlinks ist es nicht nötig ein "http://" voranzustellen. Sowohl http://www.link.de als auch www.link.de ist beides gültig.

Interner Link:

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[seite| ] Öffnet eine Inhaltsseite [seite|@=Kategorie 1:Seite 1=@] Seite 1
[kategorie| ] Öffnet die erste Seite einer Inhaltskategorie [kategorie|@=Home=@] Home

Die zur Verfügung stehenden Inhaltsseiten, bzw. Kategorien, werden aus der Selectbox eingefügt.

Download-Link:

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[datei| ] Startet den Download, oder je nach
Browser-Plugin, auch die Anzeige einer Datei
[datei|@=Home:archive.zip=@] archive.zip

Die zur Verfügung stehenden Dateien werden aus der Selectbox eingefügt.

Für alle Link-Syntax-Elemente gilt:

Wird hinter den Befehlsnamen ein = Zeichen gesetzt, gefolgt von Text oder einem weiteren Syntax-Befehl, ändert sich die Anzeige des Links entsprechend.

Variante 1:

Wird nach dem = Zeichen Text eingefügt, so wird dieser Text angezeigt, anstatt des ursprünglichen Linknamens.

Beispiel: Ergebnis:
[link=Hier Klicken|http://www.mozilo.de/] Hier Klicken

Variante 2:

Wird nach dem = Zeichen per Syntaxelement [bild| ] ein Bild eingefügt, so wird dieses anstelle des Linknamens angezeigt.

Beispiel: Ergebnis:
[link=[bild|@=Home:bild.jpg=@]|http://www.mozilo.de]

Bilder einfügen:

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[bild| ] Platziert ein Bild auf einer Inhaltsseite
(Textfluss wird an beiden Seiten unterbrochen)
[bild|@=Home:bild.jpg=@] Lorem ipsum dolor sit amet, con

Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.
[bildlinks| ] Platziert ein Bild am linken Rand einer Inhaltsseite (Text fließt am rechten Bildrand vorbei) [bildlinks|@=Home:bild.jpg=@] Lorem ipsum dolor sit amet, con
Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.
[bildrechts| ] Platziert ein Bild am rechten Rand einer Inhaltsseite (Text fließt am linken Bildrand vorbei) [bildrechts|@=Home:bild.jpg=@] Lorem ipsum dolor sit amet, con
Stet clita kas dgu bergren, no sea tak imata sanctu s est Lorem ipsum dolor sit amet.

Die zur Verfügung stehenden Bilder werden aus der Selectbox eingefügt.

Für alle Bild-Syntax-Elemente gilt:

Wird hinter den Befehlsnamen ein = Zeichen gesetzt, und danach Text eingegeben, so wird dieser als Bildunterschrift angezeigt.

Beispiel: Ergebnis:
[bild=Lotusblüte am See|@=Home:bild.jpg=@]
Lotusblüte am See
Ein mit [bild| ] platziertes Bild kann mit den Befehlen [links| ], [zentriert| ], [rechts| ] horizontal ausgerichtet werden.

Sprung-Verweis

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[absatz=| ] Link, der zu einer Überschrift springt. [absatz=weiter unten >|Anleitung] weiter unten >

Im obigen Beispiel wird im Satz: "Eine Anleitung dazu gibt es weiter unten >" auf den letzten beiden Wörtern ein Sprung-Link erzeugt.
Sprung-Ziel ist das auf der gleichen Seite an anderer Stelle stehende Wort: "Anleitung", das mit oder oder als Überschrift formatiert ist.

Ohne weitere Angaben wird mit [absatz| ] ein Link erzeugt, der automatisch an den Seitenanfang springt.

Textdarstellung als Liste

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[liste| ] Erzeugt eine eingerückte Textzeile mit vorangestelltem Listenpunkt. [liste|Erste Zeile]
[liste|Zweite Zeile]
  • Erste Zeile
  • Zweite Zeile
[numliste| ] Erzeugt eine eingerückte Textzeile mit vorangestellter Nummerierung. [numliste|Erste Zeile]
[numliste|Zweite Zeile]
  1. Erste Zeile
  2. Zweite Zeile

Beide Syntax-Elemente können auch miteinander verschachtelt werden.

Beispiel: Ergebnis:
[numliste| Erste Zeile]
[numliste| Zweite Zeile
    [liste|Erste Unterzeile]
    [liste|Zweite Unterzeile]
    [liste|Dritte Unterzeile]
]
[numliste|Dritte Zeile]
  1. Erste Zeile
  2. Zweite Zeile
    • Erste Unterzeile
    • Zweite Unterzeile
    • Dritte Unterzeile
  3. Dritte Zeile

Tabelle

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[tabelle|
<< | >>
< | >
]
Text oder Andere Elemente in eine nach Zeilen und Spalten geordnete (tabellarische) Anordnung bringen. [tabelle|
<< Kopf-Spalte 1|Kopf-Spalte 2 >>
< Zeile 1-Spalte 1|Zeile 1-Spalte 2 >
< Zeile 2-Spalte 1|Zeile 2-Spalte 2 >
]
Kopf-Spalte 1 Kopf-Spalte 2
Zeile 1-Spalte 1 Zeile 1-Spalte 2
Zeile 2-Spalte 1 Zeile 2-Spalte 2

Durch Hinzufügen weiterer Zeilenbegrenzer < > und Spaltentrenner | kann eine Tabelle aus beliebig vielen Zeilen und Spalten bestehen.

Tabellen können nur symetrisch aufgebaut sein. Das heißt: Jede Zeile muss die gleiche Anzahl von Spalten enthalten.

Trennlinie

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[----] Horizontale Trennlinie [----]

html-Quelltext einfügen

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[html| ] Nimmt html-Text als solchen wahr und generiert die entsprechende Anzeige. [html|<marquee> Text </marquee>] Text

Mit diesem Syntax-Element kann zum Beispiel auch ein Video-Link eingebettet werden, oder eine interaktive Landkarte.

Include

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[include| ] Fügt den Inhalt einer anderen Seite ein [include|@=Kategorie 1:Seite 2=@] Dieser Text steht auf S. 2, wird aber überall angezeigt, wo S. 2 per "include" eingefügt wurde.

Die zur Verfügung stehenden Inhaltsseiten werden aus der Selectbox eingefügt.

Ist immer dann nützlich, wenn gleicher Inhalt an mehreren Stellen vorkommt: Soll z. B. an mehreren Stellen eine bestimmte Adresse angezeigt werden, so wird diese in eine separate Seite geschrieben, die das Attribut "versteckt" erhält. Per "include" kann dann der Inhalt dieser Seite, inklusive aller Formatierungen, überall eingefügt werden. Vorteil: Etwaige Änderungen an der Adresse müssen nur einmal ausgeführt werden.

Schrift- und Absatzformatierung

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[ueber1| ] Überschrift groß [ueber1|Überschrift groß]
Überschrift groß
[ueber2| ] Überschrift mittel [ueber2|Überschrift mittel]
Überschrift mittel
[ueber3| ] Überschrift klein [ueber3|Überschrift klein]
Überschrift klein
[links| ] Textabsatz linksbündig [links| ] Hier geht der Text los.
Hier geht er weiter. Alle Zeilen sind am linken Rand bündig ausgerichtet.
[zentriert| ] Textabsatz zentriert [zentriert| ] Hier geht der Text los.
Hier geht er weiter. Alle Zeilen sind mittig ausgerichtet.
[block| ] Textabsatz im Blocksatz [block| ] Hier geht der Text los. Hier geht er weiter. Und alles, ist bis zur vorletzten Zeile an beiden Rändern bündig ausgerichtet.
[rechts| ] Textabsatz rechtsbündig [rechts| ] Hier geht der Text los.
Hier geht er weiter. Alle Zeilen sind am rechten Rand bündig ausgerichtet.
[fett| ] Text fett Text wird[fett|dicker] dargestellt Text wird dicker dargestellt
[kursiv| ] Text kursiv Text wird [kursiv|schräg] dargestellt Text wird schräg dargestellt
[unter| ] Text unterstrichen Text wird [unter|unterstrichen] Text wird unterstrichen
[durch| ] Text durchgestrichen Text wird[durch|durchgestrichen] Text wird durchgestrichen

Schriftgröße

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[fontsize=| ] Ändert die Schriftgröße
(nach dem = ist ein Parameter erforderlich)
Er war ein [fontsize=22px|GIGANT] Er war ein GIGANT
Ausführliche Informationen zu den möglichen Größenparametern von Fontsize gibt es hier, bei de.selfhtml.org >

Schriftfarbe

Icon: CMS-Syntax: Funktion: Beispiel: Ergebnis:
[farbe=| ] Ändert die Schriftfarbe
(nach dem = ist ein Farbname oder hexadezimaler Farbcode erforderlich)
Dieses Wort ist[farbe=00FF00|grün] Dieses Wort ist grün

Dem Syntax Element Farbe wird vor seiner Anwendung der benötigte Farbcode zugewiesen.
Dafür hat moziloCMS einen integrierten Farbwähler .

Bei Markierung eines bereits vorhandenen Farbcodes [farbe=00FF00|grün] und anschließendem Klick auf wird nur der Farbcode ersetzt.

Zur Einstellung der gewünschten Farbe bietet er drei verschiedene Möglichkeiten.

Farbring:

1Im äußeren Kreis die gewünschte Grundfarbe durch Verschieben der Kreismarkierung einstellen.

2 Im inneren Dreieck kann das Verhältnis zwischen Helligkeit und Sättigung festgelegt werden.

RGB-Werte:

3Durch Verschieben der Slider (Rot, Grün, Blau, Sättigung und Helligkeit) oder Eingabe der entsprechenden Zahlenwerte (0 - 255) in die Textfelder.

Direkteingabe des Farbcodes:

4Ist der 6-stelige Farbcode bekannt, kann er direkt in dieses Textfenster eingetragen werden.

Weitere Elemente:

5Anzeige der aktuell eingestellten Farbe

6Anzeige der zuletzt benutzten Farbe. Per Klick kann hier die aktuelle Einstellung rückgängig gemacht werden.

7Vordefinierte Farben, die im Admin-Tab Einstellungen > gespeichert wurden.

1
2
3
4
5
6
7