Control how your site looks with Kida templates, CSS/JS assets, and theme packages.
What Do You Need?
Templating
Kida template engine, layouts, inheritance, and partials
Assets
CSS, JavaScript, images, and fonts
Themes
Use, customize, or create themes
Template Cookbook
Common templating patterns and Bengal-specific features
How Theming Works
flowchart TB
subgraph Input
A[Content Pages]
B[Theme Templates]
C[Assets CSS/JS]
end
subgraph "Template Engine"
D[Select Layout]
E[Render Templates]
F[Process Assets]
end
subgraph Output
G[HTML Pages]
H[Optimized Assets]
end
A --> D
B --> D
D --> E
C --> F
E --> G
F --> H
Customization Levels
| Level | Effort | What You Can Change |
|---|---|---|
| CSS Variables | Low | Colors, fonts, spacing via--varoverrides |
| Template Overrides | Medium | Copy and modify specific templates with swizzling |
| Custom Theme | High | Full control over all templates and assets |
Tip
Quick wins: Start with CSS Variables to change colors and fonts without touching templates. Usebengal theme swizzle --template-path <template>to copy and customize specific templates when you need structural changes.
Reference
| Reference | Description |
|---|---|
| Theme Variables | Completepage, site, sectionobject reference |
| Template Functions | 80+ filters and functions for templates |
| Kida Syntax | Kida template engine syntax reference (full docs) |
In This Section
Templating
Kida template engine, layouts, inheritance, and partials
Assets
CSS, JavaScript, images, and fonts
Themes
Use, customize, or create themes
Template Cookbook
Common templating patterns and Bengal-specific features
Create a Theme
Build a custom Bengal theme from scaffold to deployment
What Bengal Provides vs What Your Theme Provides
The capability-vs-presentation boundary — how template resolution falls back to the bundled default theme, and why directives render without a theme but shortcodes don't