CSS Styling

Thanks to CSS variables, you can easily change many styles in Files Gallery without much effort. Simply create a file _files/css/custom.css, and include your own CSS variables.

For primary button colors, Files Gallery uses variations of a blue --hue across different themes.

:root {

  // Default blueish HUE used for surfaces, text, buttons and more
  --hue: 210;

  // assign HSL (hue, saturation, lightness) primary vars here for all three themes
  --hsl-primary-dark: var(--hue) 50% 45%;
  --hsl-primary-contrast: var(--hue) 45% 50%;
  --hsl-primary-light: var(--hue) 55% 55%;
}

CSS properties

Below you will find a list of many existing custom properties.

:root {
    --popup-bg: #000;
    --popup-placeholder-bg: #222;
    --popup-timer-color: white;
    --popup-caption-max-width: 640px;
    --popup-caption-font-size: .9rem;
    --popup-caption-font-weight: 300;
    --popup-caption-line-height: 135%;
    --popup-caption-color
    --popup-caption-item-space: .35em;
    --popup-caption-line-clamp: 3;
    --files-data-top: 0;
    --files-data-display: none;
    --files-data-display-hover: block;
    --files-data-animation: opacity .2s;
    --grid-height: 100%;
    --grid-font-size: 14px;
    --list-max-width: 1040px;
    --rows-height: auto;
    --rows-justify-content: space-evenly;
    --rows-flex-grow: 1;
    --sidebar-width: calc(10vw + 180px);
    --sidebar-width-small: 85vw;
    --sidebar-width-hover: 480px;
    --menu-font-size: 16px;
    --menu-line-height: 30px;
    --menu-folder-icon-size: 22px;
    --menu-text-indent: 6px;
    --menu-icon-toggle-opacity: 0;
}

Custom CSS styles

It's also possible to include your own CSS styling. However, this requires good understanding of CSS and HTML, as you could end up breaking the interface.