Drupal 8 theming from the ground up (stream) S01P02

we are going to go back to our file manager and we'll go back to the root of our Drupal directory so this is a clean Drupal install there's been nothing done with it so I'm going to go into the themes folder actually first you can see the core folder that's where all of Drupal core school files are and if you need to look at what another theme has done or copy some code from there you can go into core then themes and here is classy or Bartek is a good example to look at and then you can copy code from there we're going to go back to the root of the directory your theme so it's empty good we can create a new folder so it's March almost st. Patrick's a my sentence then talks about leprechauns in school and learning French words for all the far Hyundai also leprechauns character so we're going to call this team leprechaun I'm going to create a folder for it so leprechaun with a lowercase that's going to be the name of our theme I'm going to go over to my code editor over here and week let this all set up here here's my leprechaun folder and this will let me create a new file and I'm going to create my info file leprechauns out info ammo so I'm ready to go and then I could go paint people through this and hand type everything and really be careful to make sure that I have the syntax correct but you're probably never going to do that in real world you're going to go into core and find another theme go to classy probably useful to take a look at class using profile here it is named classy it's a theme there's its description it's got all this core information in here and some couple symbol libraries that classy provides provides normalized so CSS and it's extending some of the existing libraries from Drupal core but we'll go in how about a walk through Leslie now so we're just going to copy all this paste it into our leprechaun file alright my coffee there we go then we'll just change the name subscribe no okay there's a weird okay I'm sorry this is a your cleanser leprechaun is a theme like this house up and keyboard shortcut this thing I don't know okay green-themed or merge very much not Korean here today and in warm Ontario it is smelling a blowing in fostering in winter it's not over yet okay we don't need any of this we're going to provide a basic library call it global styling and then we're also going to need some regions and I'm going to hope I get the syntax part - this may be a better check Bartok we'll go back over here varcek vertex in profile okc barn check in profile has a lot more stuff in it right so it has all these CK out under Celsius I don't know it students that it has lots and lots of regions I usually prefer to keep my region to a minimum so when what we need here region two spaces she name of region again anything that's a machine name in Drupal used to be all lowercase moving underscores no longer special characters so I think we can handle that right you do a header we're going to do usually like to have an infection in Drupal 8 everything is everything maybe place with content is a block now so things like messages used to be able to print right into those the page template file but we don't do that anymore messages tabs all that sort of stuff that triples going to use for for administrative purposes my life 2000 is its own region probably have a menu and colors me menu and content the content region is required better Lausanne and color you have a sidebar to which I make sure these are capitalized yeah let's do a card bar - okay so there's our info file then we'll see what happens when we go into our Drupal admin interface here we are in our basic Drupal installation see if our theme is showing up oh boy okay something like you're on I might need better clear the cache oh okay then oh there we go it's actually telling something missing required key score and scene click on and toda Amal Oh core is acquired in here ok ok CSI knows any better there we go now we can get to did a pair of screen let's see if my leprechaun seen disappearing here and there it is so this is really only need to create a theme we just need to create a young a file a folder for it the name machine name matches the name of the folder and we can install this it's not going to do anything right now it's going to look like that screenshot of Stark right here but this is start right we created it it works showing up we can install this and set it as the default see what happen it is it doesn't have a screen shot yet we have a need one we can go to the homepage of the site and this is what it looks like there's stuff there of course it's up to you to provide all the layout and CSS and everything like that and go along with the next two parts of this series to find out how to do that if we go to the block layout and we'll see that my left pecan theme has been set as a default and all the regions that we've just created are here so what we're going to do is maybe move some things around or control or admin stuff in the admin help this tab you might want to put page title on its own region depending on your page layout let's see the main navigation will move to the menu tools we'll say we don't need that user account menu maybe we'll put that in the footer car by Drupal if you want to be nice to Drupal each Status Messages we put in our admin stuff area we have a footer menu here you can put that in the footer breadcrumbs where you own your breadcrumbs before the title before the title again you might want another region career breadcrumbs depends on your page layout and your header is going to have your site branding in your search all right now one thing I'm going to caution you about is that if you enable a theme and setup the regions and you decide not to go ahead with using it you need to go back to appearance and uninstall it I've run into a couple problems before with doing that and then not uninstalling the theme and then deleting the folder and then once you get into exploring your configuration you'll find that all the configuration for those blocks from that theme that you deleted is still there and in Drupal is going to try and export it and then you're going to have a problem because it will bulk when you try and import it into a new site and some we don't know what the theme is you're trying to implement so just make sure that if you decide not to use a theme that you uninstall it and then it's going to erase all those block settings we just did and it will try and export that configuration so what's next we're going to make that library let's go back to our file manager and we'll go back to where our local contine learners go and we will see that here's our info file that we've made I'm going to make a folder for our CSS make a folder for our Java scratch we have some I'm going to meet your folder for images and we'll make folder for template now so those are our scaffolding for our theme we have a place to put our CSS we have a place to put our JavaScript you can make some go back to our code editor here and here's our leprechaun de info and our leprechaun folder we will make another new file and here we call it let's work on not library you know I'm going to do the same thing with this but I did with copying and pasting the basic structure for the yo file because we don't want to mess up that syntax and have some painstakingly type it all out ourselves and making mistakes so we'll grab classes library file so here's another interesting thing that you can see in classes as they're defining weight and this is what can go in the squirrely bracket with JavaScript in particular if you want to change the way that that script is ordering then you can do that inside a scrolling racket so this is probably actually not a good example to be costing and pull might copy Bartek instead okay so that has got lots and lots of CSS files you can see that all their components have their own CSS file separately and if you have a big complicated than you might want to do that too but you know how you structure your CSS is completely up to you you're free to do that however you show such so here's a basic one we'll just copy that and we mean it I don't really know if the version actually needs to be here I'm going to check it out and see so we're going to call this level styling I don't think this person you speak I don't usually use it so we have a CSS we have components CSS files we're going to go in our CSS file we're just going to start with one remember what this pre-process also does actually I'm going to have one global CSS file now that's good for a starting point we don't need to use bracket here and say this is our one real simple library so create this global dot CSS file here I'm going to put something in here yeah well I do some silly leprechaun stuff just to make sure that we can see that our he was working and go back to our installation now we've eyes and files so anytime you add some files to your name you're going to want clear cache and next week we'll talk more about how to run developer mode where you don't have to be doing this all the time although you still took her passion you're creating new file but it won't otherwise it will pick up even changes to files so there it is it's green it's picking up our CSS and you can really go from there so we've just got a starting point you can layer in your CSS however you feel best to do it and however you need to do it to implement your particular layout all right now we have the mark-up bed triple has created for us so next time we will find out more about how to modify that markup in part 2 of theming from the ground-up templating with swag and we'll also learn about how to override Drupal's HTML output if I inspect this using my debugger here I always like to keep it on the right side so we can see all the HTML that triples output here is our page template block you can see that it's opening or a theme in there you know what I didn't define a basting here today you cannot do that let's go back and do that so we'll go back to our info file I can just tell by the lack of classes here you can see that there is very very little classes so this is what happens when you use don't specify a basting it's going to use stark which is going to use Drupal core markup so you can see there's almost no classes in here right you just get an ID which Drupal is going to use and if I was not logged out let's turn a little dissonant incognito window and we'll see what happens when you're not logged in a lot of you have to a little bit notice the differences between what's actually going to be there for logged in users and you can see this a little bit more on this contextual ID and things like that one can get a little bit messy you're trying to sort through the code and figure out which selectors are there one thing that always throws me off is that if you have contextual links turned on this contextual class will add a position relative to stuff so the contextual region will have position:relative so if you notice things get screwed up a little bit when you are not logged down you might want to make sure to check and make sure they that you weren't working with this position:relative that was on contextual region which is provided to by default and you only see it when you're logged in so that's for the differences let's go back and add class efr be seen now please classy is our base name and then go back to my triple installation here and clear the caches again go back to the same and you can see it looks different right so class is provided normal I show CSS it's normalizing a lot of the default markup and default CSS is provided by the browser and you can see there's a lot more happening in here so if I can bring up that other window this is the incognito one now you can see the difference raised so it's providing the students they respond to the default obviously and so the facing versions are different you can see that it's normalized the emergent one to form for example and you can see that here stark which has almost new classes and here's classy so now class II has added a lot of classes you can see here on the block so for example block of core block block page title block so this gives you a lot more to work with and if you don't have another alternative basing that you like or particularly want to use and this is a good probably a good starting point um personally I find classes classes to be a bit too classy but I have toyed around with making movie scene but haven't gone far with it yet it's a lot of work so class is a reasonably starting point and next time on the we'll talk more about using twig and we'll also look at how you can use twigs you add and modify and change the classes that are being added to any particular template file and that's really all I wanted to cover for today next time we'll talk more about twig as I mentioned and templating and really get into some of the power of triple cleaning and the structure of where why the template how the template files work which can be a little bit difficult to understand for people who are new to Drupal painting so I hope to see you next time I believe that will be on March the 24th starting at 3 p.m. Standard Time thank you for watching

Channel: aPaddedCell

Views: 1,771

Rating: 5 out of 5

Keywords: Drupal, Drupal 8, PHP, Theming, Drupak

Id: CuaCRRLlPIQ

Length: 19min 51sec (1191 seconds)

Published: Fri Mar 24 2017