From 48c97372a5d68b1b51cb1e1d478b3aa1eb2e2312 Mon Sep 17 00:00:00 2001 From: Sebastian Zoglowek <55794780+zoglo@users.noreply.github.com> Date: Thu, 27 Jun 2024 19:09:04 +0200 Subject: [PATCH] Update docs - change hierarchy --- .../{docs => }/configuration/backgrounds.md | 16 +++---- .../{docs => }/configuration/icon-set.md | 16 +++---- .../{docs => }/configuration/theme/buttons.md | 0 .../configuration/theme/components.md | 10 ++--- .../{docs => }/configuration/theme/fonts.md | 0 .../{docs => }/configuration/theme/form.md | 0 .../{docs => }/configuration/theme/global.md | 0 .../{docs => }/configuration/theme/header.md | 2 +- .../configuration/theme/headings.md | 4 +- .../{docs => }/configuration/theme/layout.md | 10 ++--- .../configuration/theme/miscellaneous.md | 2 +- .../{docs => }/configuration/theme/modules.md | 0 .../configuration/theme/overview.md | 4 +- docs/pages/docs/introduction/version.md | 5 --- docs/pages/guides/skin/introduction.md | 2 +- docs/pages/guides/skin/setup-override.md | 4 +- .../introduction => installation}/index.md | 22 ++++------ docs/pages/{docs => }/installation/install.md | 10 ++--- docs/pages/{docs => }/installation/setup.md | 22 +++++----- docs/pages/{docs => }/installation/system.md | 0 mkdocs.yml | 42 +++++++++---------- 21 files changed, 79 insertions(+), 92 deletions(-) rename docs/pages/{docs => }/configuration/backgrounds.md (93%) rename docs/pages/{docs => }/configuration/icon-set.md (89%) rename docs/pages/{docs => }/configuration/theme/buttons.md (100%) rename docs/pages/{docs => }/configuration/theme/components.md (97%) rename docs/pages/{docs => }/configuration/theme/fonts.md (100%) rename docs/pages/{docs => }/configuration/theme/form.md (100%) rename docs/pages/{docs => }/configuration/theme/global.md (100%) rename docs/pages/{docs => }/configuration/theme/header.md (98%) rename docs/pages/{docs => }/configuration/theme/headings.md (98%) rename docs/pages/{docs => }/configuration/theme/layout.md (96%) rename docs/pages/{docs => }/configuration/theme/miscellaneous.md (96%) rename docs/pages/{docs => }/configuration/theme/modules.md (100%) rename docs/pages/{docs => }/configuration/theme/overview.md (94%) delete mode 100644 docs/pages/docs/introduction/version.md rename docs/pages/{docs/introduction => installation}/index.md (66%) rename docs/pages/{docs => }/installation/install.md (85%) rename docs/pages/{docs => }/installation/setup.md (90%) rename docs/pages/{docs => }/installation/system.md (100%) diff --git a/docs/pages/docs/configuration/backgrounds.md b/docs/pages/configuration/backgrounds.md similarity index 93% rename from docs/pages/docs/configuration/backgrounds.md rename to docs/pages/configuration/backgrounds.md index 5566c03..151bdf8 100644 --- a/docs/pages/docs/configuration/backgrounds.md +++ b/docs/pages/configuration/backgrounds.md @@ -24,7 +24,7 @@ Hintergrundbildern bedeutet dies, dass jede einzelne CSS-Klasse dem Anwender bek Der ThemeManager erweitert eine Option im Dateisystem, sodass Bilder als Hintergrundbild definiert werden können.
- ![Bild als Hintergrund festlegen](../../../assets/configuration/background/file-set-as-background.png){loading=lazy} + ![Bild als Hintergrund festlegen](../../assets/configuration/background/file-set-as-background.png){loading=lazy}
Über die Option kann ein Hintergrundbild festgelegt werden
@@ -32,7 +32,7 @@ Da das `CSS` für Hintergrundbilder erst generiert werden muss, stehen diese ers Verfügung.
- ![Compiler preview](../../../assets/configuration/background/background-compiler.png){loading=lazy} + ![Compiler preview](../../assets/configuration/background/background-compiler.png){loading=lazy}
Der Asset-Compiler listet alle verfügbaren Hintergründe auf
@@ -50,7 +50,7 @@ stehen. Anwender können die Hintergrundbilder unter dem Reiter Background auswählen. Die Beschriftung der Hintergrundbilder im Backend folgt hierbei dem Schema `BG-[Dateiname]`. -![Hintergrund auswählen](../../../assets/configuration/background/style-manager-background-image.png){loading=lazy} +![Hintergrund auswählen](../../assets/configuration/background/style-manager-background-image.png){loading=lazy} ### Wo kann ich Hintergrundbilder einstellen? @@ -82,7 +82,7 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei (Template-Variablen).
- ![Global, Component und Element](../../../assets/configuration/background/global-component-element.png){loading=lazy} + ![Global, Component und Element](../../assets/configuration/background/global-component-element.png){loading=lazy}
Hervorhebung der Gruppen anhand einer Bild-Text-Liste. Lila hebt lediglich das gesamte Element (Global) hervor
@@ -113,14 +113,14 @@ Der StyleManager ermöglicht es, dass CSS-Klassen an ausgewählten Stellen in ei Die im StyleManager verfügbaren Hintergrund-Einstellungen können genutzt werden, um das Verhalten des festgelegten Hintergrunds zu beeinflussen. -![Einstellungen im StyleManager](../../../assets/configuration/background/background-settings.png){loading=lazy} +![Einstellungen im StyleManager](../../assets/configuration/background/background-settings.png){loading=lazy} Die nachfolgende Tabelle erklärt alle weiteren Optionen, wobei der Standardwert bereits der `Best-Practice` folgt. | Einstellung | Standardwert | Beschreibung | |---------------------|----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Color | - | Hiermit kann eine Hintergrundfarbe ausgewählt werden. Eine Kombination mit transparenten Hintergrundbildern ist möglich. | -| Image | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden. | +| Image | [none](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) | Dient der Auswahl des Hintergrundbildes. Über die Option `none` kann ein über den [Skin](../guides/skin/introduction.md) gesetztes Hintergrundbild entfernt werden. | | Attachment | [scroll](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment) | Über diese Einstellung wird das Hintergrundbild in der Position im Browserfenster fixiert, sodass dieses beim Scrollen an der selben Stelle bleibt. | | Repeat | [no-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) | Background-Repeat kann genutzt werden, damit kleine Bilder auf einer großen Fläche wiederholt werden. Wirkt nicht, wenn etwas in `Size` eingestellt wurde. | | Size | [cover](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) | Diese Einstellung bestimmt die Größe des eingesetzten Hintergrundbildes.

Über `contain` wird das Bild so groß wie möglich innerhalb des Containers skaliert, ohne das Bild zu beschneiden oder zu dehnen. Wenn das Bild zu klein für den Container ist, wird das Bild gekachelt, wenn eine Einstellung in `Size` vorgenommen wurde.

Die Einstellung `auto` skaliert das Bild in der entsprechenden Richtung, sodass die Proportionen erhalten bleiben. | @@ -172,12 +172,12 @@ wurde eine neue Funktion hinzugefügt, welche in diversen Einstellungen von Hint Werden eigene Hintergrundfarben im StyleManager ergänzt, wird ein Platzhalter angezeigt.
- ![Farbvorschau aktivieren](../../../assets/configuration/background/color-preview-setting.png){loading=lazy} + ![Farbvorschau aktivieren](../../assets/configuration/background/color-preview-setting.png){loading=lazy}
Aktivieren der Farbvorschau in den Benutzer-Einstellungen
- ![Farbvorschau in Einstellungen](../../../assets/configuration/background/color-preview.png){loading=lazy} + ![Farbvorschau in Einstellungen](../../assets/configuration/background/color-preview.png){loading=lazy}
Farbvorschau innerhalb der Hintergrundfarben
diff --git a/docs/pages/docs/configuration/icon-set.md b/docs/pages/configuration/icon-set.md similarity index 89% rename from docs/pages/docs/configuration/icon-set.md rename to docs/pages/configuration/icon-set.md index 5e37578..36b2075 100644 --- a/docs/pages/docs/configuration/icon-set.md +++ b/docs/pages/configuration/icon-set.md @@ -8,7 +8,7 @@ Bei der Verwendung von Icon-Fonts, die über Dienste wie IcoMoon oder Fontello e stellt sich oft die Herausforderung, die zugehörigen CSS-Dateien einzubinden und die entsprechenden Klassen in Templates oder CSS-Anpassungen für Komponenten zu integrieren. -![Icon in einer Button-Komponente](../../../assets/configuration/icons/component-icon.png){loading=lazy} +![Icon in einer Button-Komponente](../../assets/configuration/icons/component-icon.png){loading=lazy} Der Contao ThemeManager ermöglicht es Anwendern, ihr Icon-Set direkt in den Systemeinstellungen auszuwählen. Automatisch generiert der ThemeManager das benötigte CSS, und die festgelegten Optionen stehen systemweit im StyleManager zur @@ -29,7 +29,7 @@ entpackt werden. Im Download einer IcoMoon-Schriftart befinden sich die benötigten Dateien im Ordner `fonts`: -![IcoMoon Download mit Dateien](../../../assets/configuration/icons/font-files.png){loading=lazy} +![IcoMoon Download mit Dateien](../../assets/configuration/icons/font-files.png){loading=lazy} Folgende Dateien müssen in *einen Ordner* abgelegt werden: @@ -39,7 +39,7 @@ Folgende Dateien müssen in *einen Ordner* abgelegt werden: Um die Icon-Schriftart einzubinden, muss die `*.svg` unter `System` -> `Einstellungen` unter ThemeManager eingebunden werden. -![Icon-Set einstellen](../../../assets/configuration/icons/settings-icon-set.png){loading=lazy} +![Icon-Set einstellen](../../assets/configuration/icons/settings-icon-set.png){loading=lazy} !!! tip @@ -49,17 +49,17 @@ werden. Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit.
- ![Asset Compiler Report](../../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy} + ![Asset Compiler Report](../../assets/configuration/icons/maintenance-generated-icon-font.png){loading=lazy}
Asset-Compiler Report
- ![Icons innerhalb der Link-Einstellungen](../../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy} + ![Icons innerhalb der Link-Einstellungen](../../assets/configuration/icons/stylemanager-icon-picker.png){loading=lazy}
Icons innerhalb der Link-Einstellungen
- ![Icon-Auswahl im RockSolid Icon-Picker](../../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy} + ![Icon-Auswahl im RockSolid Icon-Picker](../../assets/configuration/icons/rocksolid-icon-picker.png){loading=lazy}
Icon-Auswahl im RockSolid Icon-Picker
@@ -70,7 +70,7 @@ Nach Kompilieren des Themes stehen die neuen Icons in den Komponenten bereit. ### Hinweise und Fehlermeldungen -![Hinweise und Fehlermeldungen im Asset-Compiler](../../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy} +![Hinweise und Fehlermeldungen im Asset-Compiler](../../assets/configuration/icons/maintenance-no-icon-font-woff-file.png){loading=lazy} Folgende Hinweise und Fehlermeldungen können vom Asset-Compiler zurückgegeben werden: @@ -105,7 +105,7 @@ gezogen werden, um die Icons zu laden. eine Dokumentation auf [GitHub](https://github.com/fontello/fontello/wiki/Help).
- ![Übersicht der IcoMoon-App](../../../assets/configuration/icons/icoMoon.png){loading=lazy} + ![Übersicht der IcoMoon-App](../../assets/configuration/icons/icoMoon.png){loading=lazy}
Übersicht der IcoMoon-App
diff --git a/docs/pages/docs/configuration/theme/buttons.md b/docs/pages/configuration/theme/buttons.md similarity index 100% rename from docs/pages/docs/configuration/theme/buttons.md rename to docs/pages/configuration/theme/buttons.md diff --git a/docs/pages/docs/configuration/theme/components.md b/docs/pages/configuration/theme/components.md similarity index 97% rename from docs/pages/docs/configuration/theme/components.md rename to docs/pages/configuration/theme/components.md index 841207f..b0e75c5 100644 --- a/docs/pages/docs/configuration/theme/components.md +++ b/docs/pages/configuration/theme/components.md @@ -123,7 +123,7 @@ Bei Einstellung der Option `box-shadow` wird ein zusätzlicher Schatten/Schlagsc Wenn für alle Box-Komponenten nur der Schlagschatten ohne Rahmen erwünscht ist, kann der `$boxed-border-width` auf `0` gestellt werden. Soll der Rahmen bei `box` weiterhin bestehen bleiben, kann eine Option über einen eigenen -[Skin](../../../guides/skin/introduction.md) individuell erweitert werden. +[Skin](../../guides/skin/introduction.md) individuell erweitert werden. --- @@ -176,7 +176,7 @@ Folgende Einstellungen können hierbei vorgenommen werden: werden, welche im TinyMCE-Editor erstellt wurden. Es ist derzeit nicht möglich, dass Tabellenstyles über den StyleManager *aktiviert oder *deaktiviert* werden können. - Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../../guides/skin/introduction.md) angepasst werden. + Ist dies nicht erwünscht, können Tabellen im eigenen [Skin](../../guides/skin/introduction.md) angepasst werden. ### Tabellenzelle @@ -252,7 +252,7 @@ Bestandteile einer Tabelle einstellen: Bis auf die Icon-Schriftart bezieht sich die nachfolgende Konfiguration auf das Aussehen der durch den ThemeManager bereitgestellten Inhaltselemente `Icon`, `Icon-Text` und `Icon-Text-Liste`. -![Icon-Einstellungen](../../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy} +![Icon-Einstellungen](../../../assets/configuration/components/icon-settings-stylemanager.png){loading=lazy} ### Icon-Schriftart @@ -266,7 +266,7 @@ Diese Einstellung überschreibt die Schriftart der Icons, die vom ThemeManager v Generierung und Bereitstellung von Icons nicht mehr. Das Ändern der hier eingestellten Schriftart wird nur empfohlen, wenn das Feature nicht benötigt wird und die - verwendeten Icons über einen eigenen [Skin](../../../guides/skin/introduction.md) festgelegt werden. + verwendeten Icons über einen eigenen [Skin](../../guides/skin/introduction.md) festgelegt werden. ### Größe der Icons @@ -289,7 +289,7 @@ wird. `$icon-outlined-width` Über die Optionen `Design` sowie `Shape` kann das Aussehen von Icons modifiziert werden. -![Icon-Designs](../../../../assets/configuration/components/icons.png){loading=lazy} +![Icon-Designs](../../../assets/configuration/components/icons.png){loading=lazy} Die Auswahl des Designs `Outline` in den zuvor beschriebenen Einstellungen bewirkt das Hinzufügen eines Rahmens um das Icon. Die Breite des Rahmens kann über `$icon-outlined-width` eingestellt werden. diff --git a/docs/pages/docs/configuration/theme/fonts.md b/docs/pages/configuration/theme/fonts.md similarity index 100% rename from docs/pages/docs/configuration/theme/fonts.md rename to docs/pages/configuration/theme/fonts.md diff --git a/docs/pages/docs/configuration/theme/form.md b/docs/pages/configuration/theme/form.md similarity index 100% rename from docs/pages/docs/configuration/theme/form.md rename to docs/pages/configuration/theme/form.md diff --git a/docs/pages/docs/configuration/theme/global.md b/docs/pages/configuration/theme/global.md similarity index 100% rename from docs/pages/docs/configuration/theme/global.md rename to docs/pages/configuration/theme/global.md diff --git a/docs/pages/docs/configuration/theme/header.md b/docs/pages/configuration/theme/header.md similarity index 98% rename from docs/pages/docs/configuration/theme/header.md rename to docs/pages/configuration/theme/header.md index 27644a7..8d51216 100644 --- a/docs/pages/docs/configuration/theme/header.md +++ b/docs/pages/configuration/theme/header.md @@ -143,7 +143,7 @@ Flexbox-Anweisung `justify-content`[^2] mit den Optionen: teilweise mit denen von CSS-Flexbox überlagern, können die `center` und `space-*` Anweisungen weiterhin verwendet werden. - Der Header kann mit folgendem CSS im [Skin](../../../guides/skin/introduction.md) auf CSS-Grid gestellt werden: + Der Header kann mit folgendem CSS im [Skin](../../guides/skin/introduction.md) auf CSS-Grid gestellt werden: ```css header > .inside { display: grid; diff --git a/docs/pages/docs/configuration/theme/headings.md b/docs/pages/configuration/theme/headings.md similarity index 98% rename from docs/pages/docs/configuration/theme/headings.md rename to docs/pages/configuration/theme/headings.md index e7eefa9..ae6d278 100644 --- a/docs/pages/docs/configuration/theme/headings.md +++ b/docs/pages/configuration/theme/headings.md @@ -250,7 +250,7 @@ In den nachfolgenden Abschnitten werden die nachfolgenden Einstellungen beschrie Wenn das [Global Spacing](#global-spacing-automatisch) nicht aktiviert wird, gelten folgende Regeln für den unteren Abstand (*Margin*) für Überschriften: -![Headline Spacing normal](../../../../assets/configuration/headline/headline-spacing.png){loading=lazy} +![Headline Spacing normal](../../../assets/configuration/headline/headline-spacing.png){loading=lazy} | Breakpoints | Small | Medium | Large | |-----------------------|----------------------------|------------------------------|------------------------------| @@ -280,7 +280,7 @@ Abstand (*Margin*) für Überschriften: dies oft die einzig notwendige Einstellung ist. Die nachfolgende Tabelle zeigt an, welche der Config-Variablen genutzt wird. -![Headline Spacing global](../../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy} +![Headline Spacing global](../../../assets/configuration/headline/headline-spacing-global.png){loading=lazy} | Breakpoints | Small | Medium | Large | |------------------------------------------|-----------------------------|------------------------------|------------------------------| diff --git a/docs/pages/docs/configuration/theme/layout.md b/docs/pages/configuration/theme/layout.md similarity index 96% rename from docs/pages/docs/configuration/theme/layout.md rename to docs/pages/configuration/theme/layout.md index bf1486e..5f9e499 100644 --- a/docs/pages/docs/configuration/theme/layout.md +++ b/docs/pages/configuration/theme/layout.md @@ -25,12 +25,12 @@ Typische Breakpoints sind beispielsweise für definiert, um ein konsistentes und benutzerfreundliches Erlebnis auf unterschiedlichen Geräten zu gewährleisten. Im Gegensatz zu anderen CSS-Frameworks legt der ThemeManager auch Wert auf Bildschirme, die über Full HD (1920 x 1080) hinausgehen. -![Breakpoints des ThemeManagers](../../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy} +![Breakpoints des ThemeManagers](../../../assets/configuration/layout/grid-breakpoints.png){loading=lazy} Der ThemeManager fügt sechs Breakpoints hinzu, die sich in den StyleManager-Einstellungen als Suffix der Konfigurationen widerspiegeln, zum Beispiel `(xs)`. -![Breakpoints im StyleManager](../../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy} +![Breakpoints im StyleManager](../../../assets/configuration/layout/stylemanager-breakpoints.png){loading=lazy} | Breakpoint | Bildschirmgröße | Geräte | |------------|----------------:|--------------------------:| @@ -110,7 +110,7 @@ Diese Optionen erlauben die Auswahl eines [Breakpoints](#breakpoints) für die V und/oder rechte Spalte in der gleichen Reihe wie die Hauptspalte angezeigt werden. -![Verhalten des Layouts](../../../../assets/configuration/layout/layout-behavior.png){loading=lazy} +![Verhalten des Layouts](../../../assets/configuration/layout/layout-behavior.png){loading=lazy} Über `$layout-column-width-*` können die Breiten für die linke und rechte Spalte eingestellt werden. Mit `$layout-column-gutter` wird der Abstand zur Hauptspalte konfiguriert. @@ -166,7 +166,7 @@ Hälfte des konfigurierten [Grid-Gutter](#grid). Möchte man diesen Abstand verg konfiguriert werden.
- ![Äußeres Padding von Artikeln](../../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"} + ![Äußeres Padding von Artikeln](../../../assets/configuration/layout/article-outer-padding.png){loading=lazy width="375"}
Padding am Bildschirmrand
@@ -264,7 +264,7 @@ Ein Artikel dient hierbei immer als Grid-Container, der die Ausrichtung der Kind kann. Inhaltselemente lassen sich in das 12-Spalten-Raster einordnen. -![12er Grid](../../../../assets/configuration/layout/grid-columns-12.png){loading=lazy} +![12er Grid](../../../assets/configuration/layout/grid-columns-12.png){loading=lazy} !!! danger "Spaltenanzahl von 12 ($grid-columns)" Es wird nicht empfohlen, die Anzahl der Spalten von 12 zu ändern, da die Optionen des StyleManagers nicht diff --git a/docs/pages/docs/configuration/theme/miscellaneous.md b/docs/pages/configuration/theme/miscellaneous.md similarity index 96% rename from docs/pages/docs/configuration/theme/miscellaneous.md rename to docs/pages/configuration/theme/miscellaneous.md index abde780..49d16e5 100644 --- a/docs/pages/docs/configuration/theme/miscellaneous.md +++ b/docs/pages/configuration/theme/miscellaneous.md @@ -104,7 +104,7 @@ Kompilieren für alle Breakpoints gelten. Nach der Generierung erfolgt die Benen In `$display-properties` können die gewünschten [Display-Eigenschaften](https://developer.mozilla.org/en-US/docs/Web/CSS/display) nacheinander eingetragen werden. -![Dynamisch generierte Display-Eigenschaften](../../../../assets/configuration/misc/display-properties.png){loading=lazy} +![Dynamisch generierte Display-Eigenschaften](../../../assets/configuration/misc/display-properties.png){loading=lazy} ``` none block flex table grid inline-block inline-flex inline-grid diff --git a/docs/pages/docs/configuration/theme/modules.md b/docs/pages/configuration/theme/modules.md similarity index 100% rename from docs/pages/docs/configuration/theme/modules.md rename to docs/pages/configuration/theme/modules.md diff --git a/docs/pages/docs/configuration/theme/overview.md b/docs/pages/configuration/theme/overview.md similarity index 94% rename from docs/pages/docs/configuration/theme/overview.md rename to docs/pages/configuration/theme/overview.md index 05e874a..78c6fb3 100644 --- a/docs/pages/docs/configuration/theme/overview.md +++ b/docs/pages/configuration/theme/overview.md @@ -12,7 +12,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen. !!! info Jeder Bezeichner einer einzustellenden Variable entspricht der jeweiligen - [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../../guides/skin/introduction.md) + [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](../../guides/skin/introduction.md) abgerufen werden kann. --- @@ -22,7 +22,7 @@ Erscheinungsbild jeder Webseite nach Bedarf anzupassen. In Version 2.0 des Contao ThemeManagers wurde die Konfiguration angepasst, sodass die hier dokumentierte Reihenfolge der Theme-Konfiguration mit der im Contao-Backend übereinstimmt. -![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png) +![Backend-Ansicht der Theme Konfiguration](../../../assets/configuration/1_config.png)
diff --git a/docs/pages/docs/introduction/version.md b/docs/pages/docs/introduction/version.md deleted file mode 100644 index b5de06e..0000000 --- a/docs/pages/docs/introduction/version.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Versionshinweise ---- - -# Versionshinweise und Aktualisierungen diff --git a/docs/pages/guides/skin/introduction.md b/docs/pages/guides/skin/introduction.md index 539e06f..b5684a4 100644 --- a/docs/pages/guides/skin/introduction.md +++ b/docs/pages/guides/skin/introduction.md @@ -14,7 +14,7 @@ Theme-Entwicklung nützlich sein können. !!! danger "Der Name `_theme.scss` ist reserviert!" Deine eingebundene Skin-Datei sollte niemals den Namen `_theme.scss` tragen, da diese für das Contao ThemeManager - Framework reserviert ist. Solltest du Teile des Frameworks anpassen wollen, kannst du in [Overrides](override.md) + Framework reserviert ist. Solltest du Teile des Frameworks anpassen wollen, kannst du [hier](setup-override.md) nachlesen, wie dies funktioniert. ## Theme-Compiler diff --git a/docs/pages/guides/skin/setup-override.md b/docs/pages/guides/skin/setup-override.md index c3f65f6..6be0d66 100644 --- a/docs/pages/guides/skin/setup-override.md +++ b/docs/pages/guides/skin/setup-override.md @@ -10,11 +10,11 @@ eingestellten Variablen in deinen SCSS-Dateien verwendet werden können. ausgetauscht werden können. Jede SCSS-Datei, welche über Theme-Quelldateien eingebunden wird, kann auf alle Variablen der -[Theme-Konfiguration](../../docs/configuration/theme/overview.md) zugreifen. +[Theme-Konfiguration](../../configuration/theme/overview.md) zugreifen. ## Dein eigener Skin / Einbinden eigener SCSS-Dateien -Nachdem du die [Einrichtung](../../docs/installation/setup.md) durchgeführt hast, kannst du in einem Theme deine +Nachdem du die [Einrichtung](../../installation/setup.md) durchgeführt hast, kannst du in einem Theme deine _Theme-Quelldateien_ einbinden. Für jede Quelldatei wird eine `*.css`-Datei mit selbem Namen abgelegt. !!! info "Dateien im Layout einbinden" diff --git a/docs/pages/docs/introduction/index.md b/docs/pages/installation/index.md similarity index 66% rename from docs/pages/docs/introduction/index.md rename to docs/pages/installation/index.md index b8166d3..1fa24ee 100644 --- a/docs/pages/docs/introduction/index.md +++ b/docs/pages/installation/index.md @@ -1,14 +1,12 @@ --- -title: Contao ThemeManager +title: Übersicht --- -# ThemeManager Dokumentation - -Willkommen zur Dokumentation des Contao ThemeManagers! +# Übersicht !!! info - Derzeit befindet sich die Dokumentation noch im Aufbau, aber wir arbeiten daran, sie so schnell wie möglich für dich - bereitzustellen. + Dokumentationen einer frei verfügbaren Software befinden sich immer im Aufbau. Bitte zögere nicht hierzu beizutragen + oder ___ @@ -24,7 +22,7 @@ ___ Contao ThemeManager entspricht. Erfahre mehr über die notwendigen Voraussetzungen, um den Contao ThemeManager nutzen zu können. - [:octicons-arrow-right-24: Systemanforderungen](/docs/pages/docs/installation/system) + [:octicons-arrow-right-24: Systemanforderungen](system.md) - :octicons-download-24:{ .lg .middle } __Download und Installation__ @@ -33,7 +31,7 @@ ___ Hier erfährst du, wie du den Contao ThemeManager herunterladen und erfolgreich in deine Contao-Installation integrieren kannst. Schritt-für-Schritt-Anleitungen helfen dir, das Plugin reibungslos zu installieren. - [:octicons-arrow-right-24: Installation](/docs/pages/docs/installation/install) + [:octicons-arrow-right-24: Installation](install.md) - :octicons-book-24:{ .lg .middle } __Ersteinrichtung__ @@ -42,7 +40,7 @@ ___ Nach der Installation ist es wichtig, den Contao ThemeManager korrekt einzurichten. Entdecke, wie du die ersten Konfigurationsschritte durchführst und das Theme-Management optimal auf deine Bedürfnisse abstimmst. - [:octicons-arrow-right-24: Ersteinrichtung](/docs/pages/docs/installation/setup) + [:octicons-arrow-right-24: Ersteinrichtung](setup.md) - :octicons-device-desktop-24:{ .lg .middle } __ThemeManager Demo__ @@ -52,10 +50,6 @@ ___ [Demo](https://demo.contao-thememanager.com) des Contao ThemeManagers installierst und die wichtigsten Funktionen kennenlernen kannst. - [:octicons-arrow-right-24: Demo installieren](/docs/pages/guides/demo/product-installer) + [:octicons-arrow-right-24: Demo installieren](../guides/demo/product-installer.md)
- - -
-Vielen Dank für dein Interesse am Contao ThemeManager! diff --git a/docs/pages/docs/installation/install.md b/docs/pages/installation/install.md similarity index 85% rename from docs/pages/docs/installation/install.md rename to docs/pages/installation/install.md index bb8aff0..23ada60 100644 --- a/docs/pages/docs/installation/install.md +++ b/docs/pages/installation/install.md @@ -37,20 +37,20 @@ Der Contao Manager kann über ``example.com/contao-manager.phar.php`` aufgerufen !!! info Hier findest Du [weitere Informationen über den Contao Manager](https://docs.contao.org/manual/de/installation/contao-manager/) -![Contao Manager suchen](../../../assets/setup/1_manager_1.png) +![Contao Manager suchen](../../assets/setup/1_manager_1.png) 1. Der Contao ThemeManager lässt sich über die Suche durch die Eingabe von ``Contao ThemeManager`` finden. ____ -![Paket hinzufügen](../../../assets/setup/1_manager_2.png) +![Paket hinzufügen](../../assets/setup/1_manager_2.png) 2. Auf ``Details`` klicken, bis sich das Pop-up öffnet. 3. Paket zur Installation hinzufügen. ____ -![Paket hinzufügen](../../../assets/setup/1_manager_3.png) +![Paket hinzufügen](../../assets/setup/1_manager_3.png) - Auf ``Änderung anwenden`` klicken, damit das Paket installiert wird. ____ -![Datenbank aktualisieren](../../../assets/setup/1_manager_4.png) +![Datenbank aktualisieren](../../assets/setup/1_manager_4.png) - Nachdem die Installation durchgelaufen ist, muss die Datenbank aktualisiert werden, hierzu klickt man auf ``Update Database``/``Datenbank aktualisieren``. ____ -![Migrationen ausführen](../../../assets/setup/1_manager_5.png) +![Migrationen ausführen](../../assets/setup/1_manager_5.png) - Im letzten Schritt müssen die neuen Felder und Tabellen angelegt werden. diff --git a/docs/pages/docs/installation/setup.md b/docs/pages/installation/setup.md similarity index 90% rename from docs/pages/docs/installation/setup.md rename to docs/pages/installation/setup.md index 585a93a..b8686f5 100644 --- a/docs/pages/docs/installation/setup.md +++ b/docs/pages/installation/setup.md @@ -9,7 +9,7 @@ erklärt. Beginne damit, in die Dateiverwaltung *(System/Dateiverwaltung)* von Contao zu navigieren und erstelle einen Ordner, in dem die Theme-Dateien deines erstellten Themes kompiliert werden sollen. -![Ordner erstellen](../../../assets/setup/2_folder_2.png) +![Ordner erstellen](../../assets/setup/2_folder_2.png) Stelle sicher, dass dieser Ordner öffentlich erreichbar ist. ## Theme erstellen / einstellen @@ -21,14 +21,14 @@ eine neue Palette **Theme-Compiler** erweitert wurde. Schau dir die offizielle [Contao-Dokumentation](https://docs.contao.org/manual/de/layout/theme-manager/themes-verwalten/) an, um zu erfahren, wie ein Theme in Contao eingerichtet wird. -![Ordner im Theme einstellen](../../../assets/setup/3_theme_3.png) +![Ordner im Theme einstellen](../../assets/setup/3_theme_3.png) Wähle den zuvor erstellten Ordner aus, in welchen die CSS-Dateien kompiliert werden sollen. Nach der Auswahl des Ordners kannst du durch **Speichern und kompilieren** die initialen Stylesheets generieren. ### Compiler-Report -![Compiler Report](../../../assets/setup/3_theme_6.png) +![Compiler Report](../../assets/setup/3_theme_6.png) Nach erfolgreichem Abschluss wirst du zum Compiler-Report weitergeleitet. Hier werden drei Dateien erstellt: | Datei | Funktion | @@ -68,7 +68,7 @@ Layoutbereiche (Hauptspalte, Linke Spalte, Rechte Spalte). Im nachfolgenden Beispiel nennen wir es **Default**. -![Layout für volle Breite erstellen](../../../assets/setup/4_layout_3.png) +![Layout für volle Breite erstellen](../../assets/setup/4_layout_3.png) Bei der Erstellung eines neuen Layouts werden bereits folgende Einstellungen durch den ThemeManager vorgenommen: - Zeilen *(Kopfzeile, Hauptzeile und Fußzeile)* @@ -80,7 +80,7 @@ Bei der Erstellung eines neuen Layouts werden bereits folgende Einstellungen dur Du musst lediglich die im vorherigen Schritt generierten Stylesheets einbinden. -![CSS-Dateien im Layout einbinden](../../../assets/setup/4_layout_5.png) +![CSS-Dateien im Layout einbinden](../../assets/setup/4_layout_5.png) Binde nun unter **Externe Stylesheets** deine durch den [Compiler](#compiler-report) erstellten Stylesheets in folgender Reihenfolge ein: @@ -105,10 +105,10 @@ kannst du die folgenden Schritte befolgen. Im nachfolgenden Beispiel nennen wir dieses Layout **Content**. -![Default-Layout duplizieren](../../../assets/setup/4_layout_7.png) +![Default-Layout duplizieren](../../assets/setup/4_layout_7.png) Dupliziere das zuvor erstellte [Layout](#layout-fur-volle-breite) und passe die gewünschte Anzahl der Spalten an. -![Content-Layout einstellen](../../../assets/setup/4_layout_8.png) +![Content-Layout einstellen](../../assets/setup/4_layout_8.png) In diesem Beispiel haben wir die Layoutbereiche **Hauptspalte** und **Reche Spalte** hinzugefügt, sodass diese jetzt **zwischen** den Layoutbereichen **Hauptspalte Oben** und **Hauptspalte Unten** eingebunden werden können. @@ -123,14 +123,14 @@ Das CSS-Framework des Contao ThemeManagers kann an die eigenen Bedürfnisse ange Dies umfasst beispielsweise Farben, Typografie, Überschriften, Formulare, Buttons, Tabellen, Layout-Einstellungen, das Grid, die Breakpoint-Einstellungen und vieles mehr. -![Theme-Konfiguration](../../../assets/setup/3_theme_4.png) +![Theme-Konfiguration](../../assets/setup/3_theme_4.png) Die Theme-Konfiguration lässt sich nun über die Theme-Übersicht mithilfe des **Theme konfigurieren**-Buttons aufrufen. -![Beispiel der Theme-Konfiguration](../../../assets/setup/5_config_1.png) +![Beispiel der Theme-Konfiguration](../../assets/setup/5_config_1.png) *Änderung der primären Farbe* -![Speichern und Kompilieren des Themes](../../../assets/setup/3_theme_5.png) +![Speichern und Kompilieren des Themes](../../assets/setup/3_theme_5.png) *Speichern und Kompilieren des Themes.* ___ @@ -149,4 +149,4 @@ erster Stelle eingebunden werden. In bestimmten Ausnahmen wie z.B. [^2]: Es empfiehlt sich die _background.css in der Reihenfolge immer als letzte Stylesheet-Datei einzubinden, damit das -Überschreiben dieser über einen eigenen [Skin](../../guides/skin/introduction.md) einfacher ist. +Überschreiben dieser über einen eigenen [Skin](../guides/skin/introduction.md) einfacher ist. diff --git a/docs/pages/docs/installation/system.md b/docs/pages/installation/system.md similarity index 100% rename from docs/pages/docs/installation/system.md rename to docs/pages/installation/system.md diff --git a/mkdocs.yml b/mkdocs.yml index 9d3efe1..67b2537 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,28 +1,26 @@ # Navigation nav: - Home: index.md - - Dokumentation: - - pages/docs/introduction/index.md - - pages/docs/introduction/version.md - - Installation: - - pages/docs/installation/system.md - - pages/docs/installation/install.md - - pages/docs/installation/setup.md - - Konfiguration: - - Theme: - - pages/docs/configuration/theme/overview.md - - pages/docs/configuration/theme/global.md - - pages/docs/configuration/theme/fonts.md - - pages/docs/configuration/theme/headings.md - - pages/docs/configuration/theme/buttons.md - - pages/docs/configuration/theme/components.md - - pages/docs/configuration/theme/form.md - - pages/docs/configuration/theme/modules.md - - pages/docs/configuration/theme/header.md - - pages/docs/configuration/theme/miscellaneous.md - - pages/docs/configuration/theme/layout.md - - pages/docs/configuration/icon-set.md - - pages/docs/configuration/backgrounds.md + - Installation: + - pages/installation/index.md + - pages/installation/system.md + - pages/installation/install.md + - pages/installation/setup.md + - Konfiguration: + - Theme: + - pages/configuration/theme/overview.md + - pages/configuration/theme/global.md + - pages/configuration/theme/fonts.md + - pages/configuration/theme/headings.md + - pages/configuration/theme/buttons.md + - pages/configuration/theme/components.md + - pages/configuration/theme/form.md + - pages/configuration/theme/modules.md + - pages/configuration/theme/header.md + - pages/configuration/theme/miscellaneous.md + - pages/configuration/theme/layout.md + - pages/configuration/icon-set.md + - pages/configuration/backgrounds.md - Anleitungen: - pages/guides/index.md - Demo: