Drupal 8 Theming - Part 06 - Theming the Header

hello this is even for watch and learn comm and now that we are running the latest version of Drupal we are ready to get to something so in today's episodes we are going to theme the header on our front page adjust the front page so let's get to it okay so first of all let's define our home page because as of right now we have this file called page dot HTML that twig and that file is going to be used no matter what on what type of content we go to so if we when later we have some posts if we click on those posts page dot HTML that wig is going to load and it's going to display a content on this template of course we don't want that because we want our front page to be different from all the other pages so we don't want the front page to look like let's say articles page or some other custom post type pages so first of all let's open up our console right here and let's see what the drupal suggests for us so one of the file suggestions for this page would be let me just see so file name suggestions for this page is page dot HTML that week which we are using right now then page dash dash dot HTML dot twig which we won't use and then we have this page - - front the dot HTML dot twig so we want to rename our file that okay so I'm just going to and also you can see you can see what template is currently being used to display this page so as you can see begin output and then we have this layout container right here I don't know if I can okay I will make this a little bit bigger so you can see better as you can see we have begin output themes custom and daemon page dot HTML tweak and this is the end of that output so this is the file that that is being used to display layout container and everything within it so if we go right here and see this layout container so that's our page okay so we don't want this file to be used page dot HTML that week we want file called page - - front dot HTML that week okay so to do that I'm just going to rename this file right here rename it and we are going to call page - - front dot HTML that week as Drupal suggested for us so let me just see page - - frontage HTML tweak okay that's okay and we press ENTER and now this is the our new front page so I'm just going to close this actually I'm not going to close it I'm going to refresh this page just to see if we are using that template as you can see nothing happens right now because it's still calling page dot HTML that week so we are going to go to our configuration and then we are going to go to performance and clear cache now if we go back to our site as you can see we got our content back and you can see that teams custom and diamond page - - front is currently being used to display this page okay great so we defined our front page next we are going to do the header of that of that front page there are two ways that we can do this so one way I will call the Drupal way so that's the way you would use if you want to make a theme and then maybe sell that theme or put it to be free for people to download and then they can install it on their Drupal site and change some things in that theme so that would be the Drupal way but the other way which I would actually prefer but I'm not going to show you in these tutorials I'm going to show you the Drupal way quote-unquote the other way would just be let's say we are doing a header so instead of calling this page header right here I would just do I don't know I would just delete this and just I start writing my HTML for it putting in my logos my tag lines and so on so if I'm doing this custom for a client for a page that isn't going to be changed that much or the blocks aren't going to be moved around and so on but we are going to do it the Drupal way in this tutorial so first of all let's look at our header so if I just click on elements right here and go here you can see that it's beginning output from core theme stable templates block block system branding block so if we go to structure and block layout you will see that the header region is calling block called site branding so this is it right here so this home and Drupal theming that is the name of our site so sidebar ending if we configure this so click on this you will see that this is a special block that we get with Drupal so we have our site logo right here site name site slogan so if I do site logo I disable it save block and then go to my front page you will see that this home image that was being called disappeared so that's the way you can configure your blocks and you can configure your header to do something so I'm just going to turn this site logo back on let's just check it again on our front page and this home right here appeared again okay so what we want to do we want to overwrite this file called block - their system branding - block dot HTML that week to call first of all we don't want it to call let me just see we don't want it to call this image in themes custom and demian logo dot SVG we wanted to call custom and demian images logo dot SVG so I don't want to put my logo in the root of my theme I want to put it in the images folder as they should be so to do that we can see that the block is being called from core theme stable templates block blocks Brandin block so what I'm going to do now is I'm going to go to core themes stable templates and then we have this block right here and block system branding so of course you won't be changing that file right here we don't want that because if you change that file here and you update core of the Drupal as you've seen in the previous episode we have to delete the core folder all the changes you made right here would be gone so what we actually want to do I'm not going to copy just this one file because we are going to be using multiple files from these templates I'm just going to copy all the templates folder copy it and then go to my theme and d.min and just paste it in okay where is the paste it's right here okay so now we have templates folder in our theme and it is exactly the same as the one we have in our core of course if we refresh this page right now nothing will change and it's still going to be calling a core theme stable blog and so on okay so what I want to do now is of course go to configuration remember every time time we add new files to our team we have to clear the cache so I'm just going to clear all caches and I'm going to go to my site right now and if we check out the output of our header right now we will see that it's calling teams custom and Dameon templates block block system branding block dot HTML dot twig so that's great so now we can change this file and when we update Drupal dot file that changes will still apply we won't be deleting anything so let's start messing around a little bit with our header right now so first of all I'm just going to go to my theme in my console actually in my terminal and I'm just going to start gulp watch as we are going to be doing some CSS and HTML so god watch now that that is started I'm just going to put this down here and I'm going to turn on my live reload what we're going to do now is I'm going to go to page - - front dot HTML dot wig and first of all I don't want my header to be in layout container I want my header to be stretched on the whole page so I'm just going to take this guy right here and then I'm going to paste it above layout container and save it now that Drupal is refreshed just going to turn this off as you can see Drupal theming and this home image moved to the left because they are not in the layout container and while we add it I'm just going to rename layout container because I don't usually use layout container I use just container I'm just going to call it container and as you can see and the whole site now is stretched over the whole page because if I go to my sass folder and go to Global's you will see that I'm calling the layout container right here with Susy and setting needs to be 1,100 pixels so instead of this being layout container I'm just going to rename it to container and now my site is back as it used to be so the next thing I'm going to do I'm going to go to my page front and in this header I'm going to add the container once again so the class of container so I want my page header block to be inside of a container but we are going to put an image behind the whole page you will see so okay I'm just going to do that save it and now the home and Drupal theming is in line with the site actually the width of the site okay so right now I have in my images folder this image called zero dot JPEG so what I'm going to do now is I'm going to go to header that a CSS so we are going to do the stylings for the header in that file and then I'm just going to do let me see what this header is called it has a roll of banner I'm just going to add a class to it called main header so this is our main header save it and then I'm going to call it right here okay and I'm going to first of all put some height on it so let's say 300 pixels okay and then I'm going to put a background image on it background and then we do URL and then we do as we are as our file is going to be saved in CSS folder so once the sass compiles we have to call the image like this so that dot images - actually / and then here o dot jpg and it's going to be set to no-repeat and it's going to be lets say center center so save this and as you can see we have a hero image right here okay so as I said before if we look at this home image we can see that it's calling teams custom and demon logo dot SVG so we don't want it to call a team's custom endymion logo we want to call teams custom and demian images logo dot SVG so to do that we just go to our so templates block so this is calling the system block called branding branding and as we can see here a first of all this twig command is checking out to see if we have a site logo so it's actually checking out if we go to structure and then we go to block layout and click on this side branding it's checking out to see if we check this site logo button right here so if we don't have it it won't call the image also one more thing about wigs so when you see this so when you see those wouldn't just make this bigger when you see these curly braces then percentage it's telling Drupal to do something so to apply some logic so that's why we are calling it this if statement inside this curly braces percentage so it's telling to do something but when you want to write something on the page you wouldn't do curly braces percentage you will just do double curly braces like right here so site logo image source site log okay so I'm going to just delete this and as you can see the site logo is going to take us to our site when we click on it so this line right here is standard H ref tag and it's calling path front so it's calling front page and it's giving it some title and some this rail attribute right here so now we want to change this site logo so there are a few ways we can do that we can of course just take our image that I have in images right here logo dot SVG and I can just put it in the root of my theme also what we can do we can go to our administration then go to appearance and then on our team we click settings and then click global settings and as you can see here use the default flow which is supplied by the theme we don't want that so what we want is actually to define a path to a custom logo also we can upload the logo image if we want so our logo can be in a public folder with images that we upload to our site or we can call it from our theme so I'm going to do this I'm just going to do themes themes custom and demian images and do logo dot SVG okay no save configuration okay and then if we refresh this page we should see a watch and learn logo right here we can also if you don't have a SVG image you can just change this to PNG so save configuration this is a different logo so this that type of a logo okay but I'm going to change it to SVG and save it so if we refresh the page now we can see that our logo is being called from themes custom and demon images logo dot SVG okay so right now what I'm going to do is I'm just going to style it a little bit I'm going to actually add an H h1 tag right here h1 and wrap it around this H ref tag okay and I'm going to give it the class of logo logo save it and then I'm going to go to my header dot s CSS and just do logo width and I'm going to use the Suzy class for this so actually I'm just going to do include include span and let's say to and then I'm going to say EMG max-width so that my image would be the same size as the logo container so max with 100% so the maximum size of this image will be hundred percent depending on this logo container right here so as you can see the logo right now is much smaller okay and the next thing I want to do is remove this Drupal 8 theming so you probably already know how you can do that one way is going right here and just click in configure block so if we click that we can just turn off site name and save lock because as you can see in this file it's checking it has an if conditional statement it's checking if the site name is turned on and if it isn't then it won't show this code right here so I just turned it off and as you can see we have to refresh it as you can see now we just have a plain old header and we have watch and learn learn logo right here in the next episode we are going to learn how we can add a menu right here and also we will make some pages so that menu could lead to somewhere ok so this is it for this episode thank you for watching in the next episode as I said we'll be doing menus you can follow me on Twitter or on Facebook you can like this page if you actually like this video if you like it you can even subscribe to my channel if you like this kind of videos follow me on Facebook and Twitter and thank you again for watching I'll see you in the next one

Channel: Watch and Learn

Views: 59,378

Rating: 4.946785 out of 5

Keywords: Drupal 8, Drupal 8 theming, tutorial, theming tutorial, css, html, Twig, front page, blocks, regions, Drupal, Drupal theming

Id: jLlXR-ONyy8

Length: 22min 44sec (1364 seconds)

Published: Sat Nov 21 2015