Changing the Layout

If you need to change the layout of your web pages, you can do so by editing the following file:

File:  src/Controller/Bootstrap/DefaultLayoutController.php

You can customize the view file based on the two available default layouts:

There are two primary types of default layouts:

Default Layout

The Default layout can be found in this file:

File:  templates/layout/_default.html.twig

The Default layout is a versatile choice suitable for most standard web pages on your website. It provides a clean and straightforward design.

Default Header Layout

The Default Header layout, which is similar to the Default layout but includes a more prominent header, is located in the following file:

File:  templates/layout/_default_header_layout.html.twig

This layout is an excellent option when you want to emphasize the header section of your web pages.

Using the Default Layout

In Symfony Twig, the {% extends %} and {% block %} directives are used for template inheritance, allowing you to create a consistent layout for your web pages while customizing specific sections. Here's a brief description and an example:

1. {% extends %}: This directive specifies which template should serve as the base layout for the current template. The extended template defines the overall structure and may include placeholder blocks to be overridden in the child template.
2. {% block %}: This directive defines a block of content within the child template that can override the content in the same-named block in the parent template. Blocks allow you to customize specific sections of the page while keeping the overall structure intact.

In the given example, the child template extends the _default.html.twig template, inheriting its structure and layout. It then overrides the page_title and content blocks to set a custom page title ("Dashboard") and to insert specific content within the layout.

This mechanism makes it easy to maintain a consistent design across your web application while providing the flexibility to tailor the content in individual pages or sections.

Here's an example of how to use the layout:

{% extends "#{theme.getParameter('KT_THEME_LAYOUT_DIR')}/_default.html.twig" %}
{#{% extends "#{theme.getParameter('KT_THEME_LAYOUT_DIR')}/_default_header_layout.html.twig" %}#}

{% block page_title %}Dashboard{% endblock %}

{% block content %}

    <!-- content goes here -->

{% endblock %}