Hilfe
Beispielformatierungen
Diese Seite ist nur in die Test1 und Test2 Entwicklungsumgebung aufzunehmen!
Markdown: Syntax Deutsch
Absatzformatierung (dies ist eine Überschrift 1)
Wenn nicht anders erwähnt, beziehen sich die Formatierung auf die Verwendung vom Markdown.
Inhaltsverzeichnis erstellen (dies ist eine Überschrift 2)
[TOC]
Über die Einstellungen des Plugin TOC kann das Inhaltsverzeichnis global parametriert werden. Diese globalen Einstellungen können für eine bestimmte Seite, in der Expertenansicht des Page-Editors, im Frontmatter überschrieben werden. Beispiel: die tiefste ins Inhaltsverzeichnis aufzunehmende Ebene für diese Seite neu definieren:
TOC:
headinglevel: 2
Überschriften mit Markdown (dies ist eine Überschrift 3)
Weitere Überschriften (dies ist eine Überschrift 4)
Für Suchmaschinen sind die erstenn 2 - 3 Überschriftebenen relevant, die nachfolgenden kaum mehr. Die dienen lediglich der feineren Strukturierung für den Leser.
Überschrift 5
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Überschrift 6 dient als alternative Bild- oder Tabellen-Unterschrift
Überschriften mit HTML-Formatierung
Wenn einer Überschrift mit einer Sprungmarke oder speziellen Attributen versehen werden soll, muss auf HTML zurück gegriffen werden.
Absätze
Markdown kennt keine Formatierung, wie die, die in HTML als Standard bezeichnet wird. Ohne weitere Formatierung / Steuerzeichen eingegebener Text wird zum Absatztext, entspricht also dem Text zwischen dem <p> und </p>-Tag in HTML. In Markdown wird ein neuer Absatz begonnen, in dem man eine Leerzeile einschiebt.
Zwei oder mehr Leerzeichen am Ende der Zeile
erzwingen einen Zeilenumbruch.
Links und Sprungmarken
Schriftfarbe des Absatzes (Überschrift) ändern
Einem Absatz oder einer Überschrift kann man über ein class- Attribut eine vordefinierte Schriftfarbe zuordnen.
Zuweisung an Überschrift:
Überschrift in green-3
Zuweisung an Absatz:
Absatz in purple-3
Alle zur Verfügung stehenden Schrift-Farben:
| CSS-Klasse | Beispiel |
|---|---|
| .ibh-u-bgColor--blue | Schrift in blue (Überschriften) |
| .ibh-u-bgColor--blue-1 | Schrift in blue-1 |
| .ibh-u-bgColor--blue-2 | Schrift in blue-2 |
| .ibh-u-bgColor--blue-3 | Schrift in blue-3 |
| .ibh-u-bgColor--blue-4 | Schrift in blue-4 |
| .ibh-u-bgColor--blue-5 | Schrift in blue-5 |
| .ibh-u-bgColor--green-1 | Schrift in green-1 |
| .ibh-u-bgColor--green-2 | Schrift in green-2 |
| .ibh-u-bgColor--green-3 | Schrift in green-3 |
| .ibh-u-bgColor--green-4 | Schrift in green-4 |
| .ibh-u-bgColor--green-5 | Schrift in green-5 |
| .ibh-u-bgColor--orange | Schrift in orange (Überschriften) |
| .ibh-u-bgColor--orange-1 | Schrift in orange-1 |
| .ibh-u-bgColor--orange-2 | Schrift in orange-2 |
| .ibh-u-bgColor--orange-3 | Schrift in orange-3 |
| .ibh-u-bgColor--orange-4 | Schrift in orange-4 |
| .ibh-u-bgColor--orange-5 | Schrift in orange-5 |
| .ibh-u-bgColor--red-1 | Schrift in red-1 |
| .ibh-u-bgColor--red-2 | Schrift in red-2 |
| .ibh-u-bgColor--red-3 | Schrift in red-3 |
| .ibh-u-bgColor--red-4 | Schrift in red-4 |
| .ibh-u-bgColor--red-5 | Schrift in red-5 |
| .ibh-u-bgColor--purple-1 | Schrift in purple-1 |
| .ibh-u-bgColor--purple-2 | Schrift in purple-2 |
| .ibh-u-bgColor--purple-3 | Schrift in purple-3 |
| .ibh-u-bgColor--purple-4 | Schrift in purple-4 |
| .ibh-u-bgColor--purple-5 | Schrift in purple-5 |
| .ibh-u-bgColor--yellow-1 | Schrift in yellow-1 |
| .ibh-u-bgColor--yellow-2 | Schrift in yellow-2 |
| .ibh-u-bgColor--yellow-3 | Schrift in yellow-3 |
| .ibh-u-bgColor--yellow-4 | Schrift in yellow-4 |
| .ibh-u-bgColor--yellow-5 | Schrift in yellow-5 |
| .ibh-u-bgColor--grey-1 | Schrift in grey-1 |
| .ibh-u-bgColor--grey-2 | Schrift in grey-2 |
| .ibh-u-bgColor--grey-3 | Schrift in grey-3 |
| .ibh-u-bgColor--grey-4 | Schrift in grey-4 |
| .ibh-u-bgColor--grey-5 | Schrift in grey-5 |
| .ibh-u-bgColor--grey-6 | Schrift in grey-6 |
| .ibh-u-bgColor--black | Schrift in black |
Die selben Farben stehen auch als Hintergrundfarbe zur Verfügung
Ganzen Absätzen können die obigen Farben auch als Hintergrundfarbe zugeordnet werden, ein Beispiel mit:
Hintergrund ibh-u-bgColor--black + weisser Schriftfarbe (wird automatisch umgestellt)
<p class="ibh-u-bgColor--black">Inhalt</p>
Hintergrundfarbe einzelnen Zeichenfolgen zuordnen:
Mit dem HTML Tag span können einzelne Wörter mit einer Hintergrundfarbe markiert werden.
Code:
<span class="ibh-u-bgColor--yellow-3">einzelne Wörter</span>
Alle zur Verfügung stehenden Hintergrund-Farben:
| CSS-Klasse | Beispiel |
|---|---|
| .ibh-u-color--blue-1 | Schrift-Hintergrund in blue-1 |
| .ibh-u-color--blue-2 | Schrift-Hintergrund in blue-2 |
| .ibh-u-color--blue-3 | Schrift-Hintergrund in blue-3 |
| .ibh-u-color--blue-4 | Schrift-Hintergrund in blue-4 |
| .ibh-u-color--blue-5 | Schrift-Hintergrund in blue-5 |
| .ibh-u-color--green-1 | Schrift-Hintergrund in green-1 |
| .ibh-u-color--green-2 | Schrift-Hintergrund in green-2 |
| .ibh-u-color--green-3 | Schrift-Hintergrund in green-3 |
| .ibh-u-color--green-4 | Schrift-Hintergrund in green-4 |
| .ibh-u-color--green-5 | Schrift-Hintergrund in green-5 |
| .ibh-u-color--orange-1 | Schrift-Hintergrund in orange-1 |
| .ibh-u-color--orange-2 | Schrift-Hintergrund in orange-2 |
| .ibh-u-color--orange-3 | Schrift-Hintergrund in orange-3 |
| .ibh-u-color--orange-4 | Schrift-Hintergrund in orange-4 |
| .ibh-u-color--orange-5 | Schrift-Hintergrund in orange-5 |
| .ibh-u-color--red-1 | Schrift-Hintergrund in red-1 |
| .ibh-u-color--red-2 | Schrift-Hintergrund in red-2 |
| .ibh-u-color--red-3 | Schrift-Hintergrund in red-3 |
| .ibh-u-color--red-4 | Schrift-Hintergrund in red-4 |
| .ibh-u-color--red-5 | Schrift-Hintergrund in red-5 |
| .ibh-u-color--purple-1 | Schrift-Hintergrund in purple-1 |
| .ibh-u-color--purple-2 | Schrift-Hintergrund in purple-2 |
| .ibh-u-color--purple-3 | Schrift-Hintergrund in purple-3 |
| .ibh-u-color--purple-4 | Schrift-Hintergrund in purple-4 |
| .ibh-u-color--purple-5 | Schrift-Hintergrund in purple-5 |
| .ibh-u-color--yellow-1 | Schrift-Hintergrund in yellow-1 |
| .ibh-u-color--yellow-2 | Schrift-Hintergrund in yellow-2 |
| .ibh-u-color--yellow-3 | Schrift-Hintergrund in yellow-3 |
| .ibh-u-color--yellow-4 | Schrift-Hintergrund in yellow-4 |
| .ibh-u-color--yellow-5 | Schrift-Hintergrund in yellow-5 |
| .ibh-u-color--grey-1 | Schrift-Hintergrund in grey-1 |
| .ibh-u-color--grey-2 | Schrift-Hintergrund in grey-2 |
| .ibh-u-color--grey-3 | Schrift-Hintergrund in grey-3 |
| .ibh-u-color--grey-4 | Schrift-Hintergrund in grey-4 |
| .ibh-u-color--grey-5 | Schrift-Hintergrund in grey-5 |
| .ibh-u-color--grey-6 | Schrift-Hintergrund in grey-6 |
| .ibh-u-color--black | Schrift-Hintergrund in black |
Formatierung von Zeichen / Sonderzeichen
Sonderzeichen
Funktion (uft) ƒ Funktion ƒ
Griechische Buchstaben uft: α β γ δ ε π ϒ ϕ λ μ ϑ Σ Ω
±3 µg/m³
(html) H2O
Mittelpunkt · / Divisions-Zeichen ÷ / Promille ‰
O mit Schrägstrich (Durchmesser) Ø / o mit Schrägstrich ø
ein Viertel ¼ / ein Zweitel ½ / ein Drittel ⅓ / zwei Drittel ⅔ / ein Sechstel ⅙
Maskierung
Um ein Steuerzeichen wie bspw. * als darstellbares Zeichen zu maskieren, wird ein \ vor das zeichen gesetzt.
Formeln
%%f(x) = \sum\limits_1^k 4x - \frac{1}{x}%%
Innerhalb eines Absatz nutzt man $5-4\alpha$ Dollarzeichen.
Tabellen
Tabelle mit Markdown erstellen
| Spaltentitel 1 | Spaltentitel 2 | Spaltentitel 3 |
|---|---|---|
| Inhalt 1 | Inhalt 2 | Inhalt 3 |
| Inhalt 1 | Inhalt 2 | Inhalt 3 |
oder ohne Spaltenüberschriften
| Inhalt 1 | Inhalt 2 | Inhalt 3 |
| Inhalt 1 | Inhalt 2 | Inhalt 3 |
h 6 als Tabellenunterschrift
Ausrichtung des Tabellentextes:
linksbündig -------------
zentriert :-----------:
rechtsbündig ------------:
Tabelle mit HTML formatieren
| Spaltentitel 1 | Spaltentitel 2 |
|---|---|
| Inhalt 1 | Inhalt 2 |
Tabelle über die gesamte Breite
| Tabellentitel 1 | Tabellentitel 2 |
|---|---|
| Inhalt 1 | Inhalt 2 |
Tabelle ohne Rahmen, erste Spalte mit fester Breite
| Inhalt 1 | Inhalt 2 |
| Inhalt 1 | Inhalt 2 |
| Inhalt 1 | Inhalt 2 |
Zellen eine Hintergrundfarbe zuordnen
| CSS-Klasse | Beispiel |
|---|---|
| .ibh-u-bgColor--blue-1 | blue-1 |
| .ibh-u-bgColor--blue-2 | blue-2 |
| .ibh-u-bgColor--blue-3 | blue-3 |
| .ibh-u-bgColor--blue-4 | blue-4 |
| .ibh-u-bgColor--blue-5 | blue-5 |
| .ibh-u-bgColor--green-1 | green-1 |
| .ibh-u-bgColor--green-2 | green-2 |
| .ibh-u-bgColor--green-3 | green-3 |
| .ibh-u-bgColor--green-4 | green-4 |
| .ibh-u-bgColor--green-5 | green-5 |
| .ibh-u-bgColor--orange-1 | orange-1 |
| .ibh-u-bgColor--orange-2 | orange-2 |
| .ibh-u-bgColor--orange-3 | orange-3 |
| .ibh-u-bgColor--orange-4 | orange-4 |
| .ibh-u-bgColor--orange-5 | orange-5 |
| .ibh-u-bgColor--red-1 | red-1 |
| .ibh-u-bgColor--red-2 | red-2 |
| .ibh-u-bgColor--red-3 | red-3 |
| .ibh-u-bgColor--red-4 | red-4 |
| .ibh-u-bgColor--red-5 | red-5 |
| .ibh-u-bgColor--purple-1 | purple-1 |
| .ibh-u-bgColor--purple-2 | purple-2 |
| .ibh-u-bgColor--purple-3 | purple-3 |
| .ibh-u-bgColor--purple-4 | purple-4 |
| .ibh-u-bgColor--purple-5 | purple-5 |
| .ibh-u-bgColor--yellow-1 | yellow-1 |
| .ibh-u-bgColor--yellow-2 | yellow-2 |
| .ibh-u-bgColor--yellow-3 | yellow-3 |
| .ibh-u-bgColor--yellow-4 | yellow-4 |
| .ibh-u-bgColor--yellow-5 | yellow-5 |
| .ibh-u-bgColor--grey-1 | grey-1 |
| .ibh-u-bgColor--grey-2 | grey-2 |
| .ibh-u-bgColor--grey-3 | grey-3 |
| .ibh-u-bgColor--grey-4 | grey-4 |
| .ibh-u-bgColor--grey-5 | grey-5 |
| .ibh-u-bgColor--grey-6 | grey-6 |
| .ibh-u-bgColor--black | black |
Tabellen importieren
Die zu importierende Tabelle ist als CSV-Datei in den Ordner der Seite, in die sie zu importieren ist, zu kopieren.
Bilder
Bilder, die man in eine Seite einbinden möchte, sind in den Ordner der Seite zu kopieren (Datei kann im Admin-Panel einfach mit der Maus in das Feld Seitenmedien, der Seite in der man das Bild einbinden möchte, gezogen werden - oder Klick in dieses Feld, dann öffnet sich ein Fenster zum Hochladen).
In die Seite wird dann das Bild mit folgendem String eingebunden: alternativer Text, der angezeigt wird, wenn das Bild nicht geladen wird
Pixelbilder
Standardauflösung
Doppelte und Dreifache Auflösung
Um bei hochauflösenden Bildschirmen dessen Auflösung auch nutzen zu können, die Bilder bei Anzeigen mit geringerer Auflösung nicht überdimmensioniert dargestellt werden, kann man diese mit einer höheren Auflösung Grav übergeben. Bei diesen Bildern ist der Dateiname vor dem Punkt mit @2x, respektive für die dreifache Auflösung mit @3x zu erweitern. Grav generiert daraus dann Bilder mit verschiedenen Auflösung, die dann je nach Endgerät auf der Seite bereit gestellt werden.
Eingebunden in die Seite werden diese dann jedoch ohne diese Erweiterung!
Position von Bildern
Bild über ganze Breite
Bild über ganze Breite, links ausgerichtet
Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Bild über ganze Breite, rechts ausgerichtet
Zweispaltige Layouts mit Bildern
Doppelbild über ganze Breite
Bild links, Absatz rechts (Breite begrenzt)
Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte!
Bild rechts, Absatz links (Breite begrenzt)
Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte! Ein Absatz neben dem Bild, welcher nicht breiter werden dürfte!
Grosses Bild in Textfluss
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.
Kleines Bild in Textfluss
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden
Kleines Bild in Textfluss mit Positionierung
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort.
Nicht nachvollziehbar
Darstellung im Firefox:
- Weshalb werden die Bilder mit einer Breite von 290 px nicht nebeinander dargestellt?
- Weshalb trennt das Bild linie-orange.png (290px x 1px) mit der Class .full nicht die Seite, so dass dieser Text nicht über das Bild rutschen kann?
SVG-Grafiken
Mit hinterlegten Hyperlinks
Mit Hoover-Text
Einzufügen unmittelbar vor <!DOCTYPE svg ...>:
<?xml-stylesheet href="/user/themes/bauhygiene/css/svgTooltips.css" type="text/css"?>
Einzufügen unmittelbar nach <!DOCTYPE svg ...>:
<script type="text/javascript" xlink:href="/user/themes/bauhygiene/js/svgTooltips.js"></script>"
WICHTIG:
- Die Namen der Kreise/Ringe müssen mit "circle_" beginnen
- Die Namen der Tooltips/Textboxen (Gruppe bestehend aus Hintergrund und Text) müssen mit "tooltip_" beginnen
- Die Zuweisung des Kreises zum entsprechenden Tooltip erfolgt über den Namen nach dem Unterstrich. Kreis "circle_31" gehört also zum Tooltip "tooltip_31"
- Wenn mehrere Kreise denselben Tooltip anzeigen sollen, müssen die Kreise zusätzlich mit einer Laufnummer benannt werden, Beispiel: "circle_1_1" und "circle_1_2" gehören beide zum "tooltip_1"
Frame einbinden
Meta Tags bearbeiten
Seitenspezifische Anpassungen
CSS bearbeiten
Der gesamte CSS-Code der Seite ist auf mehrere .scss-Dateien aufgeteilt und muss mittels einem CSS-Preprocessor zusammengefügt werden. Dazu empfehle ich dir das Tool "Scout": http://scout-app.io/ Damit du nun das CSS der Seite ändern kannst, musst du mindestens den Ordner user/themes/bauhygiene aus dem Grav-Verzeichnis bei dir Lokal haben. Diesen ziehst du dann auf die Scout-App und es sollte die Einstellungen bereits korrekt setzen:
- Input-Folder: scss
- Output Folder: css
- Environment: Production, Compressed
Bevor du Änderungen an einer .scss-Datei vornimmst, musst du in der Scout-App auf das blaue Play-Zeichen klicken. Wenn du nun eine Änderungen machst und die .scss-Datei speicherst, generiert es automatisch ein neues main.css. Die angepassten .scss-Dateien und die main.css kannst du dann wieder auf den Server laden. Ich hoffe, das funktioniert so bei dir :)