diff --git a/docs/assets/configuration/1_config.png b/docs/assets/configuration/1_config.png new file mode 100644 index 0000000..669c7cb Binary files /dev/null and b/docs/assets/configuration/1_config.png differ diff --git a/docs/pages/docs/configuration/theme/overview.md b/docs/pages/docs/configuration/theme/overview.md index 1128a29..24bbcf8 100644 --- a/docs/pages/docs/configuration/theme/overview.md +++ b/docs/pages/docs/configuration/theme/overview.md @@ -1,93 +1,84 @@ ---- -title: Theme ---- +# Übersicht -# Theme konfigurieren +## Variablen des Frameworks Innerhalb der Theme-Konfiguration können sämtliche Variablen des CTM-Frameworks überschrieben werden, um das 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](/pages/docs/configuration/skin) + abgerufen werden kann. + +## Konfigurationsstruktur + 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. -> Jeder Bezeichner einer einzustellenden Variable entspricht der -jeweiligen [SCSS-Variable](https://sass-lang.com/guide/#variables), wodurch der Wert im [Skin](/configuration/skin.md) -abgerufen werden kann. +![Backend-Ansicht der Theme Konfiguration](../../../../assets/configuration/1_config.png) -___ +
-## Verfügbare Kapitel +- :octicons-globe-24: __[Global](/pages/docs/configuration/theme/global/)__ -- [Global](#global) -- [Schriften](#schriften) -- [Überschriften](#überschriften) -- [Buttons](#buttons) -- [Komponenten](#komponenten) -- [Formular](#formular) -- [Module](#module) -- [Header](#header) -- [Sonstiges](#sonstiges) -- [Layout](#layout) + --- -### Global + Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße. -Die globalen Einstellungen betreffen grundlegende Aspekte wie Farben und Root-Schriftgröße. +- :octicons-typography-24: __[Schriften](/pages/docs/configuration/theme/fonts/)__ -- [Mehr über globale Einstellungen erfahren](/configuration/theme/global.md) + --- -### Schriften + In diesem Abschnitt können die Typografie sowie Links angepasst werden. -In diesem Abschnitt können die Typografie sowie Links angepasst werden. +- :octicons-heading-24: __[Überschriften](/pages/docs/configuration/theme/headings/)__ -- [Einstellungen zu Schriften vornehmen](/configuration/theme/fonts.md) + --- -### Überschriften + Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*). -Hier erfolgt die Konfiguration von Schriftgrößen, Farben und weiteren Optionen für Überschriften (*h1* - *h6*). +- :material-button-pointer: __[Buttons](/pages/docs/configuration/theme/buttons/)__ -- [Weitere Informationen zu Überschriften](/configuration/theme/headings.md) + --- -### Buttons + Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über den StyleManager festgelegt wurde. -Änderungen am Erscheinungsbild von Buttons und Links, für die der Button-Stil über -den [StyleManager](/tools/style-manager.md) festgelegt wurde. +- :octicons-table-24: __[Komponenten](/pages/docs/configuration/theme/components/)__ -- [Anleitung zur Konfiguration von Buttons](/configuration/theme/buttons.md) + --- -### Komponenten + Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente. -Dieser Bereich ermöglicht die Anpassung des Aussehens von Cards (Box), Linien, Tabellen und der Icon-Komponente. +- :material-form-textbox: __[Formular](/pages/docs/configuration/theme/form/)__ -- [Stilanpassungen für ThemeManager-Komponenten](/configuration/theme/components.md) + --- -### Formular + Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`, + und `legend` festgelegt werden. -Über die Formular-Konfiguration kann das gesamte Erscheinungsbild von `form`, `select`, `input`, `textarea`, `label`, -und `legend` festgelegt werden. +- :material-navigation-variant-outline: __[Module](/pages/docs/configuration/theme/modules/)__ -- [Anleitung zur Konfiguration von Formularstilen](/configuration/theme/components.md) + --- -### Module + Einstellungen für Navigationen und die Breadcrumb-Navigation. -Einstellungen für Navigationen und die Breadcrumb-Navigation. +- :material-page-layout-header: __[Header](/pages/docs/configuration/theme/header/)__ -- [Konfiguration von Modul-Stilen](/configuration/theme/components.md) + --- -### Header + Dieser Abschnitt behandelt die Konfiguration des `
`-Elements. -Dieser Abschnitt behandelt die Konfiguration des `
`-Elements. +- :material-selection: __[Sonstiges](/pages/docs/configuration/theme/miscellaneous/)__ -- [Anpassung des Header-Layouts](/configuration/theme/header.md) + --- -### Sonstiges + Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern. -Einstellungen für Textauswahl-Farbe, Schatten und Seitenverhältnisse von Bildern. +- :material-view-grid-plus-outline: __[Layout](/pages/docs/configuration/theme/miscellaneous/)__ -- [Sonstige Anpassungen](/configuration/theme/miscellaneous.md) + --- -### Layout + Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten, Artikel-Abstände, das Grid, Paddings sowie Margins. -Alle Einstellungen, die das Layout des Frameworks beeinflussen. Hierzu gehören Breakpoints, das responsive Verhalten, -Artikel-Abstände, das Grid, Paddings sowie Margins. -- [Einfussnahme auf das Layout der Website](/configuration/theme/layout.md) +