Themeing Ayllu

Ayllu can be customized in a variety of ways including custom CSS, modifying Jinja based HTML templates, or by adding new static assets such as images. Available themes can be viewed and enabled from the /config page.

The Default Theme

The default theme is located in ayllu/themes/default and is served as a base and all themes serve content from this theme if they do not override it's assets. It is possible to change the default theme by setting it in your Ayllu configuration file.

[web]
default_theme = "my-custom-theme"

By changing the default theme all additionally loaded themes will inherit the templates and assets of the default theme.

Built-in vs External Themes

Built-in Themes

Built-in themes are compiled into the Ayllu binary and available for selection from the config section of the web interface. These themes are available at ayllu/themes/. These themes use lightning css at build time to build the theme's main.min.css file.

External Themes

Additional themes can be loaded directly from the file system and allow the addition of new themes without recompiling Ayllu.

[web]

default_theme = "default"

[[web.theme]]

name = "my-custom-theme"
# path to a directory of theme templates, assets, and stylesheets
path = "/var/lib/ayllu/themes/my-custom-theme"

File System Layout

All files are optional in themes, an empty directory is considered a valid theme and will result in an identical configuration to the default_theme.

assets/             # SVG and other static assets served from /assets
assets/logo.svg     # main logo in the left hand nav bar
assets/feed.xsl     # XSL file used to style RSS feeds
assets/*.svg        # additional assets for various parts of the UI
templates/          # directory of Jinja templates
theme.css           # additional stylesheet to extend the default

See contrib/example-theme for a functional custom theme to extend as a base.