CSS Styling

If you are familiar with CSS and want to customize styles, you can create the file _files/css/custom.css which will automatically load into your Files Gallery.

Custom CSS styles

It's possible to include your own CSS to add styles or override existing styles, although this requires experience with CSS and HTML. Although custom styling is possible, we don't officially support it because of potential complications it can cause with the interface.

CSS properties

Thanks to CSS variables, you can easily change many styles in Files Gallery without much effort. For example, Files Gallery uses variations of a blue --hue across different themes for primary colors.

: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%;
}

Below you will find a list of more 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;
}