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.