Layout and Template Customization

Everything works, but if you go to /register... it looks awful. Well, of course it looks awful! FOSUserBundle has no idea how the page should be styled. But don't worry: we can get this looking much better, very quickly.

First, on the web debug toolbar, find the template icon and click it. This will show you all the templates used to render this page... which is a beautiful cheat sheet for knowing what templates you can override!

Correcting the Base Layout

The one I'm interested in is layout.html.twig, which lives in FOSUserBundle.

In my editor, I'll press Shift+Shift to open that file. Ok, every Twig template in FOSUserBundle extends this layout.html.twig file. For example, see the "Logged in as" text? That's coming from here.

But, we want all of FOSUserBundle's templates to instead extend our base.html.twig template. How can we do that?

Overriding the Layout

By overriding layout.html.twig. Let's see how. First, to override any template from a bundle, just go to app/Resources, then create a directory with the same name as the bundle: FOSUserBundle. Inside, create one more directory: views.

In this case, the layout.html.twig template lives right the root of the views/ directory in the bundle. So that's where we need to create our's. Inside, extend the normal base.html.twig.

6 lines app/Resources/FOSUserBundle/views/layout.html.twig
{% extends 'base.html.twig' %}
... lines 2 - 6

Here's the magic part. Hit Shift+Shift again and open register.html.twig: this is the template for the registration page. Notice that it overrides a block called fos_user_content. In layout.html.twig, this is printed in the middle.

So check this out: inside of our version of layout.html.twig, add {% block body %}: that's the name of the block in our base.html.twig. Then, include {% block fos_user_content %} and {% endblock %}.

6 lines app/Resources/FOSUserBundle/views/layout.html.twig
{% extends 'base.html.twig' %}
{% block body %}
{% block fos_user_content %}{% endblock %}
{% endblock %}

We're effectively transferring the content from the fos_user_content block to the correct block: body.

These 5 lines of code are huge. Refresh the page! Ha! So much better! Not perfect, but every page now lives in our layout. If you want, you can even add a little more markup around the block.

12 lines app/Resources/FOSUserBundle/views/layout.html.twig
... lines 1 - 2
{% block body %}
<div class="container">
<div class="row">
<div class="col-xs-12">
{% block fos_user_content %}{% endblock %}
</div>
</div>
</div>
{% endblock %}

Overriding Individual Templates

Overriding the base layout is step one. But, each individual page still won't look quite right. On this page, we at least need a "Register" h1, and I'd like to make that button look better.

So in addition to overriding layout.html.twig, you really need to override every template from FOSUserBundle that you use - like registration, reset password, login and a few others.

Once again, click the templates link in the web debug toolbar. The template behind this page is register.html.twig, which we already have open. But notice, it immediately includes register_content.html.twig. This is a really common pattern in this bundle.

Let me show you: I'll click the views link to move my tree into FOSUserBundle. In Registration, we have register.html.twig and register_content.html.twig. In Profile there's the same for edit and show.

In most cases, you'll want to override the _content.html.twig template. Why? Well, it doesn't really matter: by overriding the _content.html.twig template, you don't need to worry about extending anything: you can just focus on the content.

Copy the contents of register_content.html.twig. Then, back in app/Resources/views, create a Registration directory. I'm doing that because this template lives in a Registration directory. Finally, create register_content.html.twig and paste in the content. Let's add a couple of classes to the button and an h1 that says: "Register Aquanauts!"

11 lines app/Resources/FOSUserBundle/views/Registration/register_content.html.twig
{% trans_default_domain 'FOSUserBundle' %}
<h1>Register Aquanaut!</h1>
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
{{ form_widget(form) }}
<div>
<input class="btn btn-primary" type="submit" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_end(form) }}

Ok, refresh! Love it! In your app, make sure to do this for all of the different pages from the bundle that you're using. And remember, if you don't need a page - like the edit profile page - save yourself some time by not importing its route or overriding its template.

Leave a comment!

  • 2017-08-11 mattxtlm

    Hey Diego Aguiar,

    that solved the issue totally. My translator in config.yml was deactivated. That could have been quite a long search, because I had no idea where to start.

    Thanks a lot!

    Matt

    PS: I already tried to override the translation files, but that didn't have any effect. Now I know why :-)

  • 2017-08-11 Diego Aguiar

    Hey mattxtlm

    Those labels are made for beign translated, FOSUserBundle comes with translations for a lot of languages, but you have to activate it, like this:


    // config.yml
    framework:
    ....
    translator: { fallback: en }


    if you give a look into the default form templates, you can see `{% trans_default_domain 'FOSUserBundle' %}` that's like the namespace where the FOS translations lives, if you would like to override them, you will have to create a translation file: `app/Resources/translations/FOSUserBundle.{language}.yml` and replace the key you want, but don't forget you need to clear cache whenever you create a new translation file (if you only update it, dont have to)

    I hope it helps you, cheers!

  • 2017-08-11 mattxtlm

    Somehow, my FOS forms (the customized and the non-customized) display labels like "form.email" "form.password", "form.submit". It seems to me, some variables can't be resolved, but I don't know where to look at.

    Oh, and in my FOS Flash Messages and emails, that's also the case.

    Thanks,
    Matt

  • 2017-08-09 Diego Aguiar

    Hey kaizoku!

    If you are going to only override the templates, there are other easier ways to do it. I would suggest you to create a child bundle only when you don't have any other choice (maintaining extra bundles represents more work)

    Have a nice day :)

  • 2017-08-09 kaizoku

    It isn't recommended anymore to declare our Userbundle as child bundle of FOS in order to override template ?