Options | Hadron Theme

Theme Options

The Hadron theme offers a variety of options to customize the theme to your liking. The options contain the default Quark settings + some additional options by Hadron.

Admin Panel

To configure the theme, navigate in the Admin Panel to Themes and select the Hadron theme. Here you can find the theme options, grouped by Hadron & Quark settings.

Hadron Settings

The Hadron settings contain the following options:

• H5P Source URL: The URL to the H5P library. This is required to use H5P content.
• Show dropdown menu: Show a dropdown menu in the header navigation with subpages.

Quark Settings

The Quark settings contain the following options:

• Production Mode: Enable or disable production mode. If enabled, minimized CSS files are used.
• Grid Size: The grid size of the theme. A larger grid size will result in larger content.
• Header Defaults
  • Custom Favicon: Upload a custom favicon for the website
  • Custom Logo: Upload a custom logo for the header navigation
  • Custom mobile Logo: Upload a custom logo for the mobile navigation
  • Fixed Header: Enable or disable a fixed (sticky) header
  • Animate Header: Enable or disable an animated header on scroll
  • Dark Header: Enable or disable a dark header
  • Transparent Header: Enable or disable a transparent header
• Footer Defaults
  • Sticky Footer: Enable or disable a sticky footer (footer always at the bottom)
• Blog Defaults
  • Blog URL: The URL to the blog page
  • Hero Classes: The default hero classes for the hero element on the blog page
• Spectre.css Options
  • Experimental CSS: Enable or disable experimental CSS features
  • Icons CSS: Enable or disable the icons CSS

Configuration File

All the above settings can also be configured by file. The configuration file is located in user/config/themes/hadron.yaml. The file contains the following settings by default:

grid-size: grid-lg        # Grid size of the theme: grid-lg, grid-md, grid-sm
blog-page: /blog          # URL to the blog page
dropdown:
  enabled: true           # Show dropdown menu in header navigation
header-fixed: true        # Enable fixed (sticky) header
header-animated: true     # Enable animated header on scroll
header-dark: false        # Enable dark header
header-transparent: false # Enable transparent header
sticky-footer: true       # Enable sticky footer (footer always at the bottom)
spectre:
  exp: false              # Enable experimental CSS features
  icons: false            # Enable icons CSS
production-mode: true     # Enable production mode (use minimized CSS files)

# URL to the H5P library
h5pembedrootpath: 'https://h5p.org/h5p/embed/'

# Default hero classes for the blog page
blog_page_hero_classes: 'text-light title-h1h2 overlay-dark-gradient hero-large parallax'

# Custom Favicon
favicon:
  # Path to the favicon
  user/themes/hadron/images/favicon.svg:
    name: favicon.svg       # Name of the file
    full_path: favicon.svg  # Full path to the file
    type: image/svg+xml     # File type
    size: 4868              # File size
    path: user/themes/hadron/images/favicon.svg

# Custom Logo for the header navigation
custom_logo:
  user/themes/hadron/images/logo/logo.svg:
    name: logo.svg
    full_path: logo.svg
    type: image/svg+xml
    size: 4868
    path: user/themes/hadron/images/logo/logo.svg

# Custom Logo for the mobile navigation
custom_logo_mobile:
  user/themes/hadron/images/logo/logo.svg:
    name: logo.svg
    full_path: logo.svg
    type: image/svg+xml
    size: 4868
    path: user/themes/hadron/images/logo/logo.svg