WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.406 --> 00:00:04.526 align:middle Everything works, but if you go to /register... 00:00:06.636 --> 00:00:08.236 align:middle it looks awful. 00:00:08.956 --> 00:00:11.336 align:middle Well, of course it looks awful! 00:00:11.756 --> 00:00:15.846 align:middle FOSUserBundle has no idea how the page should be styled. 00:00:16.536 --> 00:00:20.596 align:middle But don't worry: we can get this looking much better, very quickly. 00:00:20.676 --> 00:00:25.866 align:middle First, on the web debug toolbar, find the template icon and click it. 00:00:25.866 --> 00:00:30.636 align:middle This will show you all the templates used to render this page... 00:00:30.816 --> 00:00:35.776 align:middle which is a beautiful cheat sheet for knowing what templates you can override! 00:00:36.876 --> 00:00:42.726 align:middle The one I'm interested in is layout.html.twig, which lives in FOSUserBundle. 00:00:42.806 --> 00:00:49.576 align:middle In my editor, I'll press Shift+Shift to open that file. 00:00:49.576 --> 00:00:56.456 align:middle Ok, every Twig template in FOSUserBundle extends this layout.html.twig file. 00:00:59.276 --> 00:01:02.676 align:middle For example, see the "Logged in as" text? 00:01:03.156 --> 00:01:04.716 align:middle That's coming from here. 00:01:05.926 --> 00:01:14.466 align:middle But, we want all of FOSUserBundle's templates to instead extend our base.html.twig template. 00:01:15.336 --> 00:01:16.236 align:middle How can we do that? 00:01:17.066 --> 00:01:20.106 align:middle By overriding layout.html.twig. 00:01:20.106 --> 00:01:20.366 align:middle Let's see how. 00:01:20.366 --> 00:01:25.826 align:middle First, to override any template from a bundle, just go to app/Resources, 00:01:26.016 --> 00:01:29.906 align:middle then create a directory with the same name as the bundle: FOSUserBundle. 00:01:33.336 --> 00:01:36.326 align:middle Inside, create one more directory: views. 00:01:36.326 --> 00:01:43.096 align:middle In this case, the layout.html.twig template lives right the root 00:01:43.256 --> 00:01:44.946 align:middle of the views/ directory in the bundle. 00:01:45.836 --> 00:01:47.596 align:middle So that's where we need to create our's. 00:01:53.076 --> 00:01:56.566 align:middle Inside, extend the normal base.html.twig. 00:01:58.006 --> 00:01:58.886 align:middle Here's the magic part. 00:01:59.406 --> 00:02:03.266 align:middle Hit Shift+Shift again and open register.html.twig: 00:02:05.106 --> 00:02:07.596 align:middle this is the template for the registration page. 00:02:08.216 --> 00:02:13.546 align:middle Notice that it overrides a block called fos_user_content. 00:02:15.536 --> 00:02:19.296 align:middle In layout.html.twig, this is printed in the middle. 00:02:19.846 --> 00:02:29.856 align:middle So check this out: inside of our version of layout.html.twig, add {% block body %}: 00:02:29.856 --> 00:02:33.626 align:middle that's the name of the block in our base.html.twig. 00:02:34.576 --> 00:02:41.146 align:middle Then, include {% block fos_user_content %} and {% endblock %}. 00:02:42.406 --> 00:02:45.106 align:middle We're effectively transferring the content 00:02:45.106 --> 00:02:49.286 align:middle from the fos_user_content block to the correct block: body. 00:02:50.586 --> 00:02:52.986 align:middle These 5 lines of code are huge. 00:02:54.246 --> 00:02:55.096 align:middle Refresh the page! 00:02:56.576 --> 00:02:58.456 align:middle Ha! So much better! 00:02:58.836 --> 00:03:03.036 align:middle Not perfect, but every page now lives in our layout. 00:03:03.756 --> 00:03:07.126 align:middle If you want, you can even add a little more markup around the block. 00:03:09.276 --> 00:03:11.246 align:middle Overriding the base layout is step one. 00:03:11.616 --> 00:03:14.846 align:middle But, each individual page still won't look quite right. 00:03:14.896 --> 00:03:22.356 align:middle On this page, we at least need a "Register" h1, and I'd like to make that button look better. 00:03:23.726 --> 00:03:29.756 align:middle So in addition to overriding layout.html.twig, you really need to override every template 00:03:29.916 --> 00:03:33.716 align:middle from FOSUserBundle that you use - like registration, 00:03:34.156 --> 00:03:36.996 align:middle reset password, login and a few others. 00:03:36.996 --> 00:03:41.926 align:middle Once again, click the templates link in the web debug toolbar. 00:03:42.936 --> 00:03:47.836 align:middle The template behind this page is register.html.twig, which we already have open. 00:03:48.936 --> 00:03:54.736 align:middle But notice, it immediately includes register_content.html.twig. 00:03:55.406 --> 00:03:57.416 align:middle This is a really common pattern in this bundle. 00:03:57.416 --> 00:04:03.626 align:middle Let me show you: I'll click the views link to move my tree into FOSUserBundle. 00:04:07.376 --> 00:04:14.806 align:middle In Registration, we have register.html.twig and register_content.html.twig. 00:04:15.606 --> 00:04:18.726 align:middle In Profile there's the same for edit and show. 00:04:18.726 --> 00:04:26.356 align:middle In most cases, you'll want to override the _content.html.twig template. 00:04:27.076 --> 00:04:33.606 align:middle Why? Well, it doesn't really matter: by overriding the _content.html.twig template, 00:04:33.846 --> 00:04:38.116 align:middle you don't need to worry about extending anything: you can just focus on the content. 00:04:40.876 --> 00:04:44.776 align:middle Copy the contents of register_content.html.twig. 00:04:45.576 --> 00:04:49.706 align:middle Then, back in app/Resources/views, create a Registration directory. 00:04:50.536 --> 00:04:54.476 align:middle I'm doing that because this template lives in a Registration directory. 00:04:55.316 --> 00:05:00.866 align:middle Finally, create register_content.html.twig and paste in the content. 00:05:01.936 --> 00:05:10.006 align:middle Let's add a couple of classes to the button and an h1 that says: "Register Aquanauts!" 00:05:14.676 --> 00:05:16.296 align:middle Ok, refresh! 00:05:18.276 --> 00:05:23.256 align:middle Love it! In your app, make sure to do this for all of the different pages 00:05:23.256 --> 00:05:24.876 align:middle from the bundle that you're using. 00:05:25.446 --> 00:05:31.866 align:middle And remember, if you don't need a page - like the edit profile page - save yourself some time 00:05:32.016 --> 00:05:36.186 align:middle by not importing its route or overriding its template.