Step 2 - Customizing the general layout

=20

We will begin by customizing the global layout of our site, in order to = end up with this rendering:

=20

1 Content rendering configuration

First, go to the root of your eZ Platform site. You should see the root = folder of the clean install, without any kind of layout. You can go to /ez, edit this Content item and see that this page changes. When <= code>/ is requested, eZ Platform renders the root content using the = ez_content:viewContent controller. We will customize this step= by instructing Platform to use a custom template to render this particular= item.

eZ Platform organizes content as a tree. Each Content item is referenced= by a Location, and each Location as a parent. The root content Location ha= s the ID 2 by default.

= Content rendering configuration

To use a custom template when rendering the root content, let's create a= content_view configuration block for ezpublish.<= /p>

We will use the default namespace, but we could have used a= ny siteaccess instead. Edit app/config/ezplatform.yml. At the = end, add the following block, right after the language configuration (pay a= ttention to indentation: default should be at the same level a= s site_group):

ezplatform.yml

=20

        default:
=09=09    content_view:
=09=09        full:
=09=09=09        root_folder:
=09=09=09            template: "full/root_folder.html.twig"
=09=09=09            match:
=09=09=09=09            Id\Location: 2

=20

This tells Platform to use the template when rendering any = content referenced by the Location with the id 2. There is a w= hole set of view matcher= s that can be used to customize rendering depending on any criterion.

Creating t= he template

Download index.html
Save it in app/Resources/views as app/Resourc= es/views/full/root_folder.html.twig.
Refresh the site's root and you should see the site's structure, but wi= thout any styles or images. Let's fix this.
Edit the root_folder.html.twig template.

Fixing the ass= ets

The first thing to do is to fix the loading of stylesheets, scripts and= design images.
Download asset= s.zip by clicking on the "Raw" button on Github.
Then unpack its contents to the web directory of your proj= ect. You will end up with web/assets/, containing css, js and images subfolders.

In the template, in the <html> section, change the <= code><style> tags about bootstrap and custom CSS lines (= lines 15 to 21) with the following code:

root_folder.html.twig

=20

{% stylesheets 'assets/css/*' filter=3D'cssrewrite' %}
    <link rel=3D"stylesheet" href=3D"{{ asset_url }}" />
{% endstylesheets %}

=20

As explained in the Symfony assetic doc, this will iterate over the f= iles in web/assets/css and load them as stylesheets. Refresh t= he page and you should now see the static design of the site. At the bottom= of the template, you will find <script> tags that load = jQuery and Bootstrap javascript (around line 360). Replace them with an equ= ivalent block for scripts:

root_folder.html.twig

=20

{% javascripts 'assets/js/*' %}
    <script src=3D"{{ asset_url }}"></script>
{% endjavascripts %}

=20

Let's finish this by fixing the design images. Locate the <img&= gt; tag with "images/128_bike_white_avenir.png". Change= the src to {{ asset('assets/images/128_bike_white_aveni= r.png') }}:

root_folder.html.twig

=20

<img alt=3D"Brand" src=3D"{{ asset('assets/images/128_bike_white_a=
venir.png') }}">

=20

Do the same for "images/logo_just_letters.png" and refresh = the page. The design should now be in order, with the logo, fonts and color= s as the first image of this page.

Rendering = the content

At this point, the root_folder.html.twig template is static= . It doesn't render any dynamic data from the repository.

The root is rendered by the ez_content:viewAction controlle= r action. This action assigns the currently viewed content as the con= tent Twig variable. We will use that variable to display some of the= fields from the root content. Replace the central section of the template,= around line 90, with the following block:

root_folder.html.twig

=20

<section class=3D"buttons">
    <div class=3D"container">
        <div class=3D"row regular-content-size">
            <div class=3D"col-xs-10 col-xs-offset-1 box-style">
                <h3 class=3D"center bottom-plus new-header">{{ ez_con=
tent_name(content) }}</h3>
                <div class=3D"col-xs-10 text-justified">{{ ez_render_=
field(content, 'description') }}</div>
            </div>
        </div>
    </div>
</section>

=20

The page will now show the values of title and description fields of the= root Platform Content.

Extracting= the layout

The general layout of the site, with the navigation, footer, scripts, et= c., is written down in the template we use to render the root. Let's extrac= t the part that is common to all the pages so that we can re-use it.

Twig supports a powerful te= mplate inheritance api. Templates may declare named blocks. Any templat= e may extend other templates, and modify the blocks defined by its parents.=

Create a new app/Resources/views/pagelayout.html.twig templ= ate and copy the contents of the current root_folder.html.twig= into it. Change the central section from the previous chapter as follows:<= /p>

pagelayout.html.twig

=20

<section class=3D"buttons">
    <div class=3D"container">
        <div class=3D"row regular-content-size">
            <div class=3D"col-xs-10 col-xs-offset-1 box-style">
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</section>

=20

This defines a block named "content". Other templates can add content to= it, so that the result of the execution of the controller is contained wit= hin the site's general layout.

Edit root_folder.html.twig and replace the whole content of= the file with the following code:

root_folder.html.twig

=20

{% extends "pagelayout.html.twig" %}
{% block content %}
<h3 class=3D"center bottom-plus new-header">{{ ez_content_name(conten=
t) }}</h3>
<div class=3D"col-xs-10 text-justified">{{ ez_render_field(content, '=
description') }}</div>
{% endblock %}

=20

This will re-use pagelayout.html.twig and replace the content block with the title and description from the root folder. = We could easily create more blocks in the pagelayout so that templates can = modify other parts of the page (footer, head, navigation), and we will over= the course of this tutorial. We can now create more templates that inherit= from pagelayout.html.twig, and customize how content is rende= red.

Let's do it for the Ride Content Type.

Next: Step 3 - Create your content model >

< Previous: Step = 1 - Getting Ready

=20

Tutorial path

=20

=20 =20 = =20 =20 =20 =20 =20 =20 =20 = =20 =20 =20 =20 =20

=20 =20

=20