Drupal 8 Theming - Part 01 - Theme Setup

hello this is Evan for watch and learn calm and in the previous episode of Drupal theming we installed Drupal so that was mandatory episode we got that out of the way and now we can do some actual work so in this episode we are going to set up our theme I'm going to show you how theming in Drupal 8 is a bit different than theming in Drupal 7 so in this episode we are going to set up our theme and activate it and I'm going to show you how you can set up CSS JavaScript and so on for your theme okay so first of all I'm going to go to this site that we installed before if we go under appearance so you click manage if this menu doesn't show up for you you click manage you go to appearance and you can see some themes so we have Bartik theme that's already fall theme and theme the site is using the administration is using this 17 so as you can see it's pretty much the same theme as the 7 as for the Drupal 7 and it's called 7 so and we have one uninstalled stark theme in this tutorials in this series I'm not going to be using some already made theme and we are going to adjust it or something like that we are going to start building our theme from scratch ok so what we want to do now is somehow make our theme appear right here so that we can enable it as you can see we don't have anything except for the themes that come with Drupal right on this page so what I'm going to do now I'm going to go right here open up my terminal go to d8 theming and I'm going to open it in sublime ok so this is the structure of Drupal 8 as you can see it's a bit different from Drupal 7 in Drupal 7 when you made a new theme you would go to sites then you had this directory called all and then themes and then you put the team in there if I remember correctly I didn't work with Drupal for quite some time now but I did a couple of Drupal 7 sites so but I know that you usually went to sites old and then add the theme right there in Drupal 8 you don't do that you just go to themes and then you create a new directory here called custom so custom okay and we have a custom folder so this is the directory that will hold our themes or in our case just one thing you also have this rhythmic txt file which explains what you should put in this directory so in the custom folder I'm going to make I'm going to make a folder for a theme and it's going to be called so new folder I'm going to call it Endymion I think it's written that way I hope at least so Endymion as you can see I really like Dan Simmons and his works so my wordpress theme is called olympus it was called Elim before that and this one is called the Endymion I would call it Hyperion but I think it's it's commonly used name for projects and so on so if you don't if you never read Dancing with these books you probably don't know what I'm talking about here but never mind okay so what's our next step if you ever worked with Drupal themes this was back in Drupal 6 and Drupal 7 to make a theme in Drupal you only have to have one file and that file would be called that info file so the name of your theme that info in Drupal 7 it's a bit different because the info file is not just standard a text file but it's actually a Yammer file so you want to call your file so we're going to do new and we're going to call this one so we're going to go to sides now themes custom and demian and we're going to call it and demian dot info dot yml so Drupal uses ymail files for configurations which is actually pretty good so I'm just going to save that and now we have our info file so in that info file we have to add some information to it so first of all we have to name our theme so I'm just going to do name and the name of our team is Endymion okay so the second thing we can add to our theme is description description and we're going to Drupal 8 starter theme I'm going to call this starter theme because I'm going to put this team on github and I probably will be using this theme in my future Drupal 8 projects up description you right type so the type of this right here is team theme and then you do no theme okay why is this I see okay theme and then okay this is it so it's it it keeps correcting my D okay and now we just write core so the core this theme is using actually what we have to define our Drupal installation so I'm just going to write eight point X and that should be it we created our theme so if I save this right here go to appearance and refresh it as you can see we have Endymion start team okay if I just put install and set us default we can start using our theme so I'm just going to copy this right here and open up a new tab and go to our site as you can see there there are no styling there actually nothing on this site except for pure a pure HTML and so on so this is the way you create themes in Drupal 8 what we're going to do next is we're going to add some CSS to it and remove some CSS from it so as I said before what we want to do is have a clean theme so we don't want to have a lot of CSS bogging eyes down maybe a CSS that we know don't know what what it does or something like that if you look at this site right now you can see that there is much tiling right here but if we go and look at the source we can see all of these CSS that Drupal's Drupal just adds to our site okay so first of all we don't want to touch any of this because some of these CSS files could be this toolbar right here and so on so what we want to do right now is I'm going to log out from the site and then refresh this page right here so we don't have a toolbar on the top and so on and if we view the source now we can see that the Drupal right now is calling all of these files so we don't want most of those files I'm just going to show you how how you can remove a couple of them we are not going to be removing all of them right they are not going to hinder our theme development but I just want to show you how you can remove those maybe unnecessary files from your team so actually our goal is to have just one CSS file with all the sass partials in it and have just one JavaScript file with all our Java scripts for the front end of Drupal at least so to remove all of those style sheets all some of them we can go to our and Demian info dot yml file and just go style sheets remove you as this is Yama file you have to watch out for the indentations so we the sublime text does this automatically for me so it did indented this right away and we go so let's just remove these views views mod module CSS I'm just going to copy this right here without this question mark and NX you are okay and put it in here we don't need this right here so okay and let's just do one more file let's say we want to remove we want to remove this align module so I'm just going to click on it so I can better cope it a line module dot CSS and paste it right here okay now we save our file refresh the page and your source so as you can see we still have views module right here and we probably still have this align model so I'm going to login to my Drupal installation okay and I'm going to go to just the second configuration and then we're going to go to performance and say clear all caches okay and now I'm just going to log out again refresh this page right here and view the source of it okay so as you can see we don't have a views dot module dot CSS and also we don't have what did we call it align that module dot CSS right here so it was right here somewhere now it doesn't show up okay so we remove those CSS files let's now see how we can add some CSS files and some Java scripts or we start adding our CSS files we'll just log into Drupal once more and we're just going to go to manage configuration performance so I turn these off before making the video and I forgot to tell you about it so please turn these two things off because if you don't instead of seeing these actual file names right here you will be seeing just some string of weird characters so if this doesn't work for you please just turn these two things off so what we're going to do now we're going to add a new style sheet to our site it's going to be called style.css and it's going to be in CSS folder so to do that we have to create a new file first so let's create a new file and we're going to call it just a second so we go to themes custom and demian we're going to call it and in that libraries libraries dot yml okay save it now that we have this file right here in this file we defined our libraries so we define our Java scripts here and we define our CSS files here so to do that first let's define a CSS file so we're just going to do global CSS remember this is yml file so indentation is important then we do CSS okay then we do theme and then we do CSS so this is the name of our folder and style dot CSS and we do this so that should be it now that we defined that in the libraries that yml we have to call it in our info file so to do that first we define our libraries libraries then we just do this of course name of our theme and then we do global - CSS so what we defined right here so we're calling this definition right here into our info file we save it and then when we go to our page first of all let's clear all the caches of course I'm going to log out right now refresh this page and view the source of it so as you can see at the last place right here we have custom and demian slash CSS slash style dot CSS okay so we don't have this file yet if we click on it we get not found of course we're going to make those files in the future in the next episode right now let's go call a javascript file to call our javascript file or we do much of the same as we did with the CSS file so we are going to go right here and do global - yes and then j/s and then we don't do theme we just do J s slash main dot J's so our Java Script is going to be in J's folder and it's going to be called main dot j s + we do this okay and something that's not the same as the as the CSS file we have to define dependencies for it so we can leave it right here just like this if we're going to be writing I don't know pure JavaScript but since we are probably be going going to be using jQuery for this file we have to do we have to do dependencies for it so I hope I spelled this right dependencies and then we'll just do core so we're going to call a file from core as Drupal 8 comes with jQuery and just do J query and that's it that should be it okay save it and just like we did with the CSS file we just go right here and do end immun and then we do global - j s and that's it save it now let's log in once again I'm sorry okay and we just go to manage configuration performance so we always have to clear our cache clear the caches let's log out right now and refresh this page and view the source of it so it's not here it should be down there so as you can see javascript is included on the bottom of the page so as you can see Drupal include jQuery and then it included our main dot J's file okay so this is it for configuring your theme adding javascript to it CSS to it in the next episode we are going to configure gulp dot J's to work with our theme and we are also going to create these files and make live reload work and all that sort of good stuff so please if you like this video like it you can subscribe to my channel you can follow me on Twitter I hope you guys like this episode thank you for watching and I'll see you in the next one

Channel: Watch and Learn

Views: 167,205

Rating: 4.9406676 out of 5

Keywords: Drupal, Drupal 8, theming, theme, web site, website, tutorial, theme setup, css, JavaScript, yml

Id: a9u0B1F650U

Length: 20min 16sec (1216 seconds)

Published: Sun Nov 15 2015