# Themer Quickstart URL: /bengal/docs/0.4.3/get-started/quickstart-themer/ Section: get-started Tags: onboarding, theming, quickstart -------------------------------------------------------------------------------- Themer Quickstart Learn to customize Bengal themes and create your own designs. Prerequisites 0/4 complete Bengal installed Basic knowledge of HTML Familiarity with CSS Basic template syntax (Bengal uses Kida, similar to Jinja2 but with {% end %} closers) (function() { const checklist = document.currentScript.closest('.checklist'); if (!checklist) return; const progressBar = checklist.querySelector('.checklist-progress-bar'); const progressText = checklist.querySelector('.checklist-progress-text'); const checkboxes = checklist.querySelectorAll('input[type="checkbox"]'); if (!progressBar || !progressText || !checkboxes.length) return; function updateProgress() { const total = checkboxes.length; const checked = Array.from(checkboxes).filter(cb => cb.checked).length; const percentage = Math.round((checked / total) * 100); progressBar.style.width = percentage + '%'; progressText.textContent = checked + '/' + total; } checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', updateProgress); }); })(); Understand Theme Resolution Bengal looks for templates in this order: Your project — templates/ (overrides everything) Your theme — themes/your-theme/templates/ Installed themes — Via pip or uv Default theme — Built into Bengal You only need to override what you want to change. Create a Custom Theme bengal theme new --slug my-theme This creates: themes/my-theme/ ├── theme.toml ├── README.md ├── templates/ │ ├── base.html │ ├── home.html │ ├── page.html │ └── partials/ └── assets/ └── css/ └── style.css Configure Your Theme Update bengal.toml: [build] theme = "my-theme" Or use config/_default/build.yaml for split configuration: build: theme: "my-theme" Override Templates Selectively You do not need to copy all templates. Extend the default: {# themes/my-theme/templates/base.html #} {% extends "base.html" %} {% block header %} <header class="custom-header"> <h1>{{ site.title }}</h1> {% for item in menus.main %} <a href="{{ item.href }}">{{ item.name }}</a> {% end %} </header> {% end %} Everything not overridden inherits from the default theme or parent theme. Add Custom CSS Create themes/my-theme/assets/css/custom.css: :root { --color-primary: #3498db; --color-text: #2c3e50; } .custom-header { background: var(--color-primary); padding: 2rem; } Include in your template: {% block extra_head %} <link rel="stylesheet" href="{{ asset_url('css/custom.css') }}"> {% end %} Template Variables Key variables available in templates (all support safe dot-notation access): Variable Description site.title Site title from configuration site.description Site description site.baseurl Site base URL site.pages All pages in the site menus.main Main navigation menu (safe access) page.title Current page title page.content Rendered HTML content (use with | safe) page.href Page URL with baseurl applied page.date Publication date page.tags List of tags page.description Page description params Page frontmatter (cascades page → section → site) theme Theme configuration (safe dot-notation access) bengal Engine metadata Bengal provides 80+ template functions. Common ones: asset_url('path') — Generate asset URLs url_for('path') — Generate page URLs get_menu('name') — Get a navigation menu time_ago / date_iso — Format dates ({{ page.date | time_ago }}) truncate_chars(text, length) — Truncate text Debug Theme Issues # List available themes bengal theme list # Get theme info bengal theme info --slug default # Debug theme resolution bengal theme debug # Discover installed themes bengal theme discover # Swizzle a template for customization bengal theme swizzle --template-path partials/header.html Next Steps Theme Customization — Deep dive into overrides Template Functions — All available filters and functions Variables Reference — Complete template variables Assets — CSS, JS, and image handling -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 496 - Reading Time: 2 minutes