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.~~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.