# An Ihr Template anpassen

Fileshelf richtet sich nach Ihrem Template, statt es zu übermalen. Ohne jede Einstellung übernehmen Listen, Kacheln, Tabellen und die Seite eines Downloads Schrift, Farben, Schaltflächen und Felder des Templates – geprüft mit Cassiopeia, YOOtheme Pro, Helix Ultimate und Astroid. Diese Seite zeigt, wie Sie darüber hinaus anpassen, vom Farbwähler bis zum eigenen Override.

## Ohne Code: die Optionen

Unter **Optionen → Darstellung** wählen Sie eine **Akzentfarbe** und die **Ecken**, oder Sie schalten das **Stylesheet** von Fileshelf ab (siehe *Optionen und Rechte*).

## Mit einer Zeile CSS: die Variablen

Farben, Linien und Ecken von Fileshelf hängen an Variablen. Setzen Sie sie in der `user.css` Ihres Templates (Cassiopeia: *System → Site Template Styles → Cassiopeia → Erweitert* bzw. die Datei `media/templates/site/cassiopeia/css/user.css`):

```
.com-fileshelf {
  --fsh-accent: #b8322b;   /* Schaltflächen und Kennzeichen */
  --fsh-on-accent: #fff;   /* Schrift auf der Akzentfarbe */
  --fsh-border: #d0d4da;   /* Linien und Rahmen */
  --fsh-radius: 0;         /* Ecken */
  --fsh-gap: 1.5rem;       /* Abstand zwischen Einträgen */
}
```

Ohne eigene Werte nimmt Fileshelf die Farben des Templates: bei Cassiopeia die Primärfarbe und die Rahmenfarbe, bei Bootstrap-Templates (Helix Ultimate, Astroid, T4) die Bootstrap-Variablen, sonst leitet es Linien aus der Textfarbe ab. Deshalb bleibt Fileshelf auch auf dunklen Abschnitten lesbar.

## Eigene Regeln gewinnen immer

Das Aussehen von Fileshelf (Farben, Rahmen, Schaltflächen, Felder) steht in einer eigenen CSS-Ebene (`@layer fileshelf`). Jede Regel Ihres Templates oder Ihrer `user.css` geht ihr vor – ohne `!important`. Nur die Anordnung (Raster, Abstände) und die Wahl unter „Darstellung“ stehen außerhalb.

## Schmale Spalten

Listen, Kacheln und die Seite eines Downloads richten sich nach der Breite des Bereichs, in dem sie stehen – nicht nach der Breite des Bildschirms. In einer Seitenleiste wird die Liste kompakt, und die Schaltfläche zeigt nur noch ein Symbol; ihren Namen lesen Screenreader weiter vor.

## Klassen der Schaltflächen und Felder

Schaltflächen, Felder und Tabellen tragen die Klassen von Bootstrap 5 und UIkit 3 zugleich – jedes Framework übernimmt seine. Nutzt Ihr Template ein anderes, legen Sie die Datei `templates/<ihr-template>/html/com_fileshelf/ui.json` an und nennen je Baustein die Klassen Ihres Frameworks:

```
{
  "button": "button is-primary",
  "button-secondary": "button",
  "input": "input",
  "select": "select",
  "table": "table is-striped"
}
```

Bausteine: `button`, `button-secondary`, `button-link`, `button-small`, `input`, `textarea`, `select`, `label`, `field`, `table`, `card`, `section` (die kleinen Abschnittsüberschriften). Die eigenen Klassen von Fileshelf (`com-fileshelf-…`) bleiben immer erhalten. Bei einem Child-Template gilt dessen Datei vor der des Eltern-Templates.

## Das Stylesheet ganz ersetzen

Ein Template kann das Stylesheet von Fileshelf durch ein eigenes ersetzen: in seiner `joomla.asset.json` ein Eintrag mit dem Namen `com_fileshelf.site`. Oder Sie schalten es unter **Optionen → Darstellung** ab.

## Overrides

Alle Ansichten und Bausteine lassen sich wie bei Joomla üblich überschreiben, unter **System → Site Template → Ihr Template → Overrides erstellen → Komponenten → com\_fileshelf**bzw. **Layouts → com\_fileshelf**. Die wichtigsten Layouts:

- `fileshelf/item` – ein Eintrag in Listen, Kacheln, Modul und Shortcodes;
- `fileshelf/file` – der Download-Kasten auf der Seite eines Downloads;
- `fileshelf/lock` – das Schloss mit dem Grund;
- `fileshelf/items` – die Liste um die Einträge;
- `fileshelf/categoryhead` – Titel, Bild und Beschreibung oben in Kategorie und Übersicht.

**Seit 1.9.0:** Die Kategorie hat die Abschnitte „Unterkategorien“ und „Downloads“, die Downloads darin sind h3, und der Kopf kommt aus dem Layout `fileshelf/categoryhead` (das frühere `fileshelf/categoryicon` entfällt). Haben Sie `category/default_head.php`, `category/default_filter.php`, `category/default_cards.php`, `category/default_table.php` oder `category/default_entries_*.php` überschrieben, übernehmen Sie diese Änderungen in Ihr Override, sonst fehlen dort Abschnitte oder Bild.

[English version](https://docs.graup-it.de/link/457)