Overriding Templates

Learn how to override specific templates to customize your panel.

Template Resolution Order

PteroCA looks for templates in this order:

1. Your theme (themes/my-theme/)

2. Default theme (themes/default/)

3. Bundle templates (vendor/easycorp/easyadmin-bundle/)

If a template exists in your theme, it's used. Otherwise, PteroCA falls back to the default.

Overriding Standard Templates

Step 1: Identify the template you want to customize

Step 2: Find it in the default theme or core

Step 3: Copy it to your theme at the same relative path

Step 4: Customize the template

Example: Customizing the dashboard

# Original location (default theme)
themes/default/panel/pages/dashboard.html.twig

# Your customization location
themes/my-theme/panel/pages/dashboard.html.twig

Overriding EasyAdmin Templates Globally

Override templates for ALL CRUD interfaces:

Example: Custom admin panel layout

{# themes/my-theme/bundles/EasyAdminBundle/layout.html.twig #}

{% extends '@!EasyAdmin/layout.html.twig' %}

{% block head_stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/theme/my-theme/css/admin.css') }}">
{% endblock %}

{% block sidebar %}
    {# Custom sidebar #}
    <div class="sidebar sidebar-custom">
        <div class="sidebar-logo">
            <img src="{{ asset('assets/theme/my-theme/images/logo.svg') }}" alt="Logo">
        </div>
        {{ parent() }}
    </div>
{% endblock %}

{% block footer %}
    <footer class="custom-footer">
        <p>&copy; {{ 'now'|date('Y') }} My Company. Powered by PteroCA.</p>
    </footer>
{% endblock %}

Overriding Per-CRUD Templates

Override templates for specific CRUD only:

Example: Custom product edit page

{# themes/my-theme/panel/crud/product/edit.html.twig #}

{% extends '@EasyAdmin/crud/edit.html.twig' %}

{% block content_title %}
    <h1 class="custom-title">
        <i class="fas fa-box"></i>
        Editing Product: {{ entity.instance.name }}
    </h1>
{% endblock %}

{% block main %}
    <div class="product-edit-wrapper">
        {{ parent() }}
    </div>

    <script>
    // Custom JavaScript for product editing
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Product edit page loaded');
        // Your custom logic here
    });
    </script>
{% endblock %}

Template Inheritance

Use Twig's powerful inheritance system:

{# Extend the parent template #}
{% extends '@!EasyAdmin/crud/index.html.twig' %}

{# Override specific block #}
{% block content_title %}
    <h1>{{ 'Custom Title'|trans }}</h1>
{% endblock %}

{# Call parent block content #}
{% block main %}
    <div class="custom-wrapper">
        {{ parent() }}
    </div>
{% endblock %}

{# Add new content after parent block #}
{% block body_javascript %}
    {{ parent() }}
    <script src="{{ asset('assets/theme/my-theme/js/custom.js') }}"></script>
{% endblock %}

Common Blocks to Override

Block	Description	Use Case
head_stylesheets	CSS includes	Add custom stylesheets
body_javascript	JavaScript includes	Add custom scripts
content_title	Page title	Customize page headers
main	Main content area	Wrap or modify content
sidebar	Sidebar navigation	Custom navigation
navbar	Top navigation bar	Custom navbar
footer	Page footer	Custom footer
flash_messages	Flash notifications	Custom alert styles

Finding Template Names

Method 1: Check default theme structure

ls -R themes/default/

Method 2: Check EasyAdmin bundle

ls -R vendor/easycorp/easyadmin-bundle/src/Resources/views/

Method 3: Enable Twig debug toolbar (dev environment)

• Shows which templates are being used

• Click on template name to see file path

Tips and Best Practices

1. Override only what you need - Don't copy entire templates if you're only changing a small section

2. Use {{ parent() }} - Include original content when extending blocks

3. Test thoroughly - Ensure overrides work across all pages

4. Document changes - Add comments explaining why you overrode a template

5. Keep templates simple - Move complex logic to controllers or services

6. Watch for updates - Core template changes may affect your overrides

Related Guides

• Theme Structure - Directory organization

• Twig Guide - Templating syntax and features

• Creating Themes - Theme creation workflow

• Testing - Quality assurance