# Fitting your template

Fileshelf follows your template instead of painting over it. Without any setting, lists, cards, tables and the page of a download take the type, colours, buttons and fields of the template – tested with Cassiopeia, YOOtheme Pro, Helix Ultimate and Astroid. This page shows how to adjust it further, from the colour picker to your own override.

## Without code: the options

Under **Options → Appearance** you choose an **accent colour** and the **corners**, or you switch off the Fileshelf **stylesheet** (see *Options and permissions*).

## With one line of CSS: the variables

Colours, lines and corners of Fileshelf hang on variables. Set them in the `user.css` of your template (Cassiopeia: the file `media/templates/site/cassiopeia/css/user.css`):

```
.com-fileshelf {
  --fsh-accent: #b8322b;   /* buttons and markers */
  --fsh-on-accent: #fff;   /* text on the accent colour */
  --fsh-border: #d0d4da;   /* lines and frames */
  --fsh-radius: 0;         /* corners */
  --fsh-gap: 1.5rem;       /* space between entries */
}
```

Without values of your own, Fileshelf takes the colours of the template: with Cassiopeia its primary and border colour, with Bootstrap templates (Helix Ultimate, Astroid, T4) the Bootstrap variables, otherwise it derives lines from the text colour. That is why Fileshelf stays readable on dark sections as well.

## Your own rules always win

The look of Fileshelf (colours, frames, buttons, fields) stands in a CSS layer of its own (`@layer fileshelf`). Every rule of your template or your `user.css` takes precedence – without `!important`. Only the arrangement (grids, spacing) and the choice under “Appearance” stand outside.

## Narrow columns

Lists, cards and the page of a download follow the width of the area they stand in – not the width of the screen. In a sidebar the list becomes compact and the button shows only a symbol; screen readers still read its name.

## Classes of buttons and fields

Buttons, fields and tables carry the classes of Bootstrap 5 and UIkit 3 at once – each framework takes its own. If your template uses another one, create the file `templates/<your-template>/html/com_fileshelf/ui.json` and name the classes of your framework per building block:

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

Building blocks: `button`, `button-secondary`, `button-link`, `button-small`, `input`, `textarea`, `select`, `label`, `field`, `table`, `card`, `section` (the small section headings). Fileshelf's own classes (`com-fileshelf-…`) always stay. With a child template, its file applies before the parent's.

## Replacing the stylesheet

A template can replace the Fileshelf stylesheet with its own: an entry named `com_fileshelf.site` in its `joomla.asset.json`. Or switch it off under **Options → Appearance**.

## Overrides

All views and building blocks can be overridden the usual Joomla way, under **System → Site Templates → your template → Create Overrides → Components → com\_fileshelf** or **Layouts → com\_fileshelf**. The most important layouts:

- `fileshelf/item` – one entry in lists, cards, module and shortcodes;
- `fileshelf/file` – the download box on the page of a download;
- `fileshelf/lock` – the lock with its reason;
- `fileshelf/items` – the list around the entries;
- `fileshelf/categoryhead` – title, image and description at the top of category and overview.

**Since 1.9.0:** a category has the sections “Subcategories” and “Downloads”, the downloads in them are h3, and the head comes from the layout `fileshelf/categoryhead` (the former `fileshelf/categoryicon` is gone). If you overrode `category/default_head.php`, `category/default_filter.php`, `category/default_cards.php`, `category/default_table.php` or `category/default_entries_*.php`, take these changes into your override, else sections or the image are missing there.

[Deutsche Fassung](https://docs.graup-it.de/link/456)