# Themer Quickstart

URL: /docs/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 (or willingness to learn) Basic Jinja2 template syntax (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/uv Default theme — Built into Bengal You only need to override what you want to change. Create a Custom Theme bengal new theme my-theme This creates: themes/my-theme/ ├── theme.yaml ├── templates/ │ ├── base.html │ ├── page.html │ └── partials/ │ ├── header.html │ └── footer.html └── static/ ├── css/ │ └── style.css └── js/ └── main.js Configure Your Theme Edit config/_default/theme.yaml: 1 2theme: name: "my-theme" Override Templates Selectively You don't need to copy all templates. Extend the default: 1 2 3 4 5 6 7 8 9 10 11 12{# themes/my-theme/templates/base.html #} {# Extend the base template if you want to reuse structure #} {% extends "base.html" %} {% block header %} <header class="custom-header"> <h1>{{ site.title }}</h1> {% for item in menu.main %} <a href="{{ item.url }}">{{ item.name }}</a> {% endfor %} </header> {% endblock %} Everything not overridden inherits from the default theme (or parent theme). Add Custom CSS Create themes/my-theme/static/css/custom.css: 1 2 3 4 5 6 7 8 9:root { --color-primary: #3498db; --color-text: #2c3e50; } .custom-header { background: var(--color-primary); padding: 2rem; } Include in your template: 1 2 3{% block extra_head %} <link rel="stylesheet" href="{{ asset_url('css/custom.css') }}"> {% endblock %} Template Variables Key variables available in templates: Variable Description site.title Site title site.pages All pages page.title Current page title page.content Raw content page.rendered_html Rendered HTML page.url Page URL menu.main Main navigation menu Debug Theme Issues 1 2 3 4 5 6 7 8# Check theme resolution bengal utils theme debug # List available themes bengal utils theme list # Get theme info bengal utils theme info default Next Steps Theme Customization — Deep dive into overrides Template Functions — Available filters Variables Reference — All template variables Assets — CSS, JS, and image handling

--------------------------------------------------------------------------------

Metadata:
- Author: lbliii
- Word Count: 412
- Reading Time: 2 minutes