Creating a Custom Drupal 8 Theme Manually

[Music] i'm starting off with a drupal 8 project open in vs code but you can follow along in any code editor in aaa you can add custom or contrib themes to the themes directory and right now there's nothing in there all the themes that ship with aaa are located in the core directory and like everything else in drupal core we don't want to touch those instead i'm going to create my own folder and themes and i'm going to call it custom this isn't required but it will help me organize my themes in some projects you may see a contrib folder in here which is great for themes that are downloaded from drupal.org now that i've created my custom folder i'm going to create another folder for my new theme i'm going to call it nitflex theme and that's just a play on the netflix name it's just for pretend the name of the folder must be all lowercase start with a letter and use an underscore instead of spaces the very first file you will create for your theme will be the theme info file and as far as drupal is concerned technically this is the only file you need the naming and placement of this file is very important it must be named the same as the theme directory for example netflix theme one or netflix theme dev is not going to work this follows the same naming convention as the theme folder the first thing the info file does is tells drupal that the theme exists then it provides information about the theme so i'm going to add some basic information about the theme the info file is a yaml file and it reads this as a key value pair for example name is the key and netflix theme is the value yaml is very picky about spacing and it does not like tabs if you are new to yaml you can follow the documentation or a quick google search for yaml docs will do the trick also if you do like using tabs you can configure your code editor to convert tabs into spaces to make yaml happy some of the basic values we can add to the info file are name and this is a human readable name of your theme the type keep in mind module files also use yaml files so we are telling drupal this is a theme and not a module a description of your theme and what version of core we are using the last thing i've added here is what base theme we want to use this could be a core theme a contrib theme or even another custom theme typically when a theme is fully developed you'll see a lot more values in here you can check out all the available values in the theming guide on drupal.org now that we have our info file drupal can see we have a theme and we can enable it so let's go to our drupal site and before we do anything let's clear our caches and turn off aggregation so let's go to configuration and performance and we only want to turn this off during development because it's going to help us not need to clear caches so much but on a production site you'll want this turned on all right now that we've cleared our caches let's enable our theme so we can do that by going to appearance and we can install and set as default so let's check out our theme and since our theme doesn't do anything yet this is exactly what i want to see so typically we want to do more than just create an info file i'm not going to go full in depth into creating a theme manually because i prefer to use a theme generator to do all this heavy lifting for me but i would like to at least demonstrate how to at least start adding some styles so to do that we're going to go back to our code editor and we're going to create another file it's going to be called net netflix theme dot libraries dot yaml and here we are telling drupal we have a library we want to use drupal uses libraries to attach css and js to a theme so what i what i'm doing here is i'm creating a library called global i can call it anything and typically you'll see quite a few libraries in here what i am telling drupal is that in my global library i have a css file called global.css in my css directory so there are a few steps left first we need to tell our info file about this library we just made let's go to our info file and tell it we would like to use a library called global again spacing is very important make sure you use two spaces to indent we're telling drupal we want to use the library global global and that is listed in our netflix theme the second part is this won't do anything because we haven't defined a global css file yet or a css folder for that matter so let's create our css folder and create a global.css and i'm going to make a very small change just to demonstrate that drupal can now see this file and i'm going to refresh the page so this is great to demonstrate how to get started and make simple changes but creating a custom theme can be much more complex we have quite a bit more work to get set up with best practices for example we should be using components and i'd really like to use sas instead of css so for the remainder of this series i'm going to use the theme generator to do all this heavy lifting for me [Music] you

Channel: Mediacurrent

Views: 5,429

Rating: 4.9473686 out of 5

Keywords: Drupal Theming

Id: py0hvItu6EY

Length: 6min 8sec (368 seconds)

Published: Tue Sep 22 2020