{{#if themeOptions.showSidebar}}
{{/if}}
{{#if themeOptions.showBreadcrumbs}}
{{/if}}
### Using Theme Options with Modular Templates
When using modular templates, theme options work seamlessly across all modules:
**Main template (page.html):**
```html
{{module=head.html}}
{{module=header.html}}
{{module=hero-banner.html}}
```
### CSS with Theme Options
```css
:root {
--primary-color: #007bff;
--text-color: #333;
--bg-color: #fff;
--border-color: #e9ecef;
}
/* Dark theme */
.theme-dark {
--text-color: #fff;
--bg-color: #1a1a1a;
--border-color: #333;
}
/* Layout variations */
.layout.with-sidebar {
display: grid;
gap: 2rem;
}
.layout.with-sidebar.sidebar-left {
grid-template-columns: 300px 1fr;
}
.layout.with-sidebar.sidebar-right {
grid-template-columns: 1fr 300px;
}
/* Hero banner */
.hero-banner {
background-size: cover;
background-position: center;
padding: 4rem 0;
color: white;
text-align: center;
}
/* Responsive */
@media (max-width: 768px) {
.layout.with-sidebar {
grid-template-columns: 1fr;
}
}
```
## Best Practices
### 1. Provide Sensible Defaults
Always provide default values for your options:
```json
{
"primaryColor": {
"type": "color",
"label": "Primary Color",
"default": "#007bff"
}
}
```
### 2. Use Descriptive Labels
Make option labels clear and user-friendly:
```json
{
"showSidebar": {
"type": "checkbox",
"label": "Display Sidebar on All Pages",
"description": "Show the sidebar navigation on every page"
}
}
```
### 3. Group Related Options
Organize related options together in your config:
```json
{
"options": {
"header": {
"logo": { "type": "image", "label": "Logo" },
"showSearch": { "type": "checkbox", "label": "Show Search" }
},
"layout": {
"showSidebar": { "type": "checkbox", "label": "Show Sidebar" },
"sidebarPosition": { "type": "select", "label": "Sidebar Position" }
}
}
}
```
### 4. Validate User Input
Always check if options exist before using them:
```html
{{#if themeOptions.logo}}
{{/if}}
```
### 5. Provide Fallbacks
Use fallback values when options aren't set:
```html
```
## Troubleshooting
### Common Issues
1. **Option not showing**: Check if the option is defined in `config.json`
2. **Value not updating**: Clear browser cache and refresh
3. **Image not displaying**: Check file permissions and path
4. **CSS not applying**: Verify CSS custom properties are defined
### Debug Tips
- Use browser developer tools to inspect theme option values
- Check the `config/theme_options.json` file for saved values
- Test with different option combinations
- Verify template syntax is correct
{{else}}
{{/if}}