Customization

Customize Zolastrap for your needs

Customization

Learn how to customize Zolastrap to match your brand and design requirements.

Custom Templates

Zolastrap supports custom templates through the Tera template engine.

Creating a Custom Template

Create a new template file in templates/:

{% extends "base.html" %}

{% block content %}
  <div class="container">
    <h1>{{page.title}}</h1>
    {{page.content | safe}}
  </div>
{% endblock %}

Use it in your content:

---
title: "My Custom Page"
template: "custom.html"
---

Custom CSS

Add custom styles by creating a static/css/custom.css:

/* Custom styles */
.my-custom-class {
    color: #ff6600;
}

Reference it in base.html:

<link rel="stylesheet" href="/css/custom.css">

Custom JavaScript

Add custom JavaScript in static/js/custom.js:

document.addEventListener('DOMContentLoaded', function() {
    console.log('Custom script loaded');
});

Add to base.html:

<script src="/js/custom.js"></script>

Bootstrap Extensions

Zolastrap includes Bootstrap 5. You can add Bootstrap extensions:

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<!-- Bootstrap JavaScript plugins -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

FontAwesome Icons

FontAwesome 5 is already included:

<i class="fas fa-star"></i>        <!-- Solid -->
<i class="far fa-star"></i>         <!-- Regular -->
<i class="fab fa-github"></i>       <!-- Brands -->

Replace the text logo with an image:

<a class="navbar-brand" href="/">
    <img src="/img/logo.png" alt="Logo" height="30">
</a>

Add custom footer content:

[extra]
footer_about = "Your site description"
footer_copyright = "© 2024 Your Name"
footer_social = true