Customize your theme
Override templates, styles, and shortcodes without forking the theme.
Local files always take priority over theme defaults.
Override a template #
Create the same file path in your local templates/ directory:
templates/page.html
Your local file takes priority over the theme’s version. Start by copying the theme’s template and modifying it — or write one from scratch that extends base.html.
Override styles #
Creating sass/style.scss in your project replaces the theme’s stylesheet entirely (local files overlay theme files by filename).
For lighter customization, create sass/custom.scss and load it via the extra_head template block (see below). Zorto compiles SCSS to CSS at build time — sass/custom.scss becomes /custom.css in the output. All built-in themes use CSS custom properties you can override:
// sass/custom.scss :root { --accent: #e74c3c; --background: #fafafa; --color: #1e293b; --max-width: 900px; }
All themes support --accent, --background, --background-raised, --color, --color-muted, --border-color, and --code-bg.
Add custom shortcodes #
Create templates in templates/shortcodes/:
{# templates/shortcodes/callout.html #} <div class="callout callout-{{ type | default(value="info") }}"> {{ body }} </div>
Use in markdown:
{% callout(type="warning") %}
This is a custom callout.
{% end %}
Inject into the base template #
All built-in themes define an extra_head template block you can fill without replacing the entire layout. Create templates/base.html in your project — it extends the theme’s base.html (Zorto resolves the extends to the theme version, not to itself):
{% extends "base.html" %} {% block extra_head %} <link rel="stylesheet" href="/custom.css"> <script defer src="/analytics.js"></script> {% endblock %}
Switch themes #
Change the theme field in config.toml:
theme = "dark"
Available themes: zorto, dkdc, default, ember, forest, ocean, rose, slate, midnight, sunset, mint, plum, sand, arctic, lime, charcoal. All include light/dark mode toggling.
Related guides #
- Themes — how the theme system works
- Customize navigation and footer — menus, logo, social links via config
- Templates — the Tera template engine and block inheritance