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 utils theme swizzleto 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 (docs | full docs) |