Creating a Drupal theme with Twig from scratch

hi there in this video I'm going to create a new Bond theme from scratch using the twig templating system doing is a model templating engine for PHP yes fast secure and flexible and we can create team will not choose very easily so we are going to use this trick tree to it commands basically these two commands to create our HTML site into our Drupal with group and him well this twig twig provides us with these commands so that we can mark our areas or mark different components of our site and this command paste or region command will help us to mark a region of our website like the header region of the content region the command this command will help us to comment in our document not doing documents so that others developers can see what can understand our code and this command is a this command if page dot region come-ons works in the manner that if this region has some content or some node in it then this region will run so basically I'm going to create a theme with a header a menu a Content area a sidebar and footer using the treats in theming so let us start okay so this is my local Drupal installation I'm going to name my theme fix theme then let us go to the root directory this is my root directory of Cupid so here under my root directory first the first and foremost task is to create an info file this info file will be are in a gambling language it will tell us then Hoople about a theme so first of all need to create a folder with the bottom lane and under here we are going to create info file what why am L okay so this info file takes in commands but this is in the wyman language and the indentation of valid language is very important otherwise it will show errors so we'll give our name Eckstein sorry yep a description okay so instead of tribe theme and code compatibility is 8 point X the trooper version the package is question as we are using our custom QR we are creating a custom team and the next one is version this one is not that important but we can put it here here it up then now we have computers we have given description of a theme so now we need to link the libraries or CSS files you are going to use for that you need to use libraries spelling yeah well in the indentation is important in yemen in language you can see that automatically Adam I can it has given this two spaces that you human language requires okay I'm going to use this 6 / styling okay that ivory is done there now the regions the region that we are going to create in our team the region that we just saw in the PPT here these regions the header menu content sidebar and footer okay I'm going to create first of all the header yeah the header then comes menu then was our content and our sidebar and our footer okay so we have created we have PA telling group on that these are the regions of our team let's see if this file and now let's go to our local host installation and see if that team is and trooper is really with him or not okay let's come here yeah we can see is Vic's team eight point six six point four we can see our team is readable to Drupal let's install and set as default okay let's go back to site okay so we can see yeah we haven't styled anything but we can see the blocks here and that the theme is set R to R 16 we can even see it on our block layout the regions that we just created the header region the main menu region the content the sidebar the footer yeah these are the regions you can see a Drupal has put in almost everything in header and content because it was already in the previous themes and the main menu and footer aside burned you to that so I'll just drag this down to footer user account menu will come under sidebar yeah and for revenue okay so let's save our blocks okay so powered by Drupal has come down on a footer menu is down here the main menus here the header has the block search in it so we we can see that those regions are ready for our theme so the next step is to add the libraries to our theme for that we need to create the libraries in inspire okay now here we need to start with this the class that we started with that we named our libraries this styling remembers did the indentation is important here then I'll write the version is not that important but sorry then this CSS theme and then the file that will be located here so for the file we are going to create a file in the CSS folder under this folder so it will be CSS slash style dot CSS okay so let's save this now let's create our folders in this directory first of all CSS folder then images folder the templates folder okay all the files will be I think the end of fonts for the all different font that we are going to use okay so now in the CSS file and the templates file folder when the CSS folder we are going to create files the templates I'm going to create a page dot HTML not break file I will get a page dot HTML file first yes so that you can code in HTML that I'm going to change it to tort wing for the templates to run in the tweak encoding so and a file in CSS that is going to be style dot CSS okay so we are going to start here with HTML now the region to create our header and content menu and so I am going to start with these regions the header region I'm going to give it a class of header it's up to us if you want to create a class or not we can just try to use the header one in the style of Jesus so the next will be laughs for the menu okay and also I am going to leave it here then after the header comes out content I want it mean sorry and cannot content plus mean under mean I'm going to have my content or just a div with class content then a div with sidebar and footer after me okay so I that this is all right now we need to put in our twig commands here we'll start with the inner one the commands would be store region right pH dot header these dot menu and same goes with content page got content now for the sidebar it is not necessary the sidebar will be there or not so I'm going to use the command if dot if page dot sidebar then with the sidebar will run and close mean now the days of footer ok we can give in comments also I will do it later let's now over and all so we need to end it sorry let's refresh this now also it is really important that we cache after every in order to have it changed because of clear the cache of our side well first of all and no changes are have been made right now just to address that we have told Drupal we have written up or to tell fukken that these are the regions that are side the next thing I'm going to do style first of all I'm going to do given body I have one color not sorry okay the next will be our header let's test it off first background color okay now let's clear our cache to clear our cache you to go to configuration performance clear all caches that cleared let's go back to site okay so let's go back to side okay so let you have here we are we can see that the styling has been applied to the header this block was it the header and the main new rows in the header as we saw here oh wait oh sorry we couldn't yeah we need to add all of this in the oh wait I want to create a new file HTML dot to it yeah and I'll just delete this okay so now if you go and create a crack or cash let's clear our cache okay so let's go back to Sadie and here we are okay so our Pedro - Imelda twig file has also run and we can see that our header block color has changed the menu is in the header block this block is in the headers area this Bravo headless area so now we just need to style this up okay so now let's try this up we'll go to our style dot CSS or let's style each of them separately I'm going to tile it content will have and color would be the same then over I'll just it is 70% so we have our footer height of a photo will be about well we can change this I'll just change that on see also I'm going to style this in menu file so menus also just homes fix when you well sister cling to the home and this here is the image along with our link to our route home so I'm just because the menu will come here I'll just see that if there are classes no there are not okay I now you know not now we have yeah these other links so I'll just copy this tooth ID or class I'm just going to clock up the class oh we are in the links under here these will have a font size 20 pixel color it already color yeah well I'm going to put text decoration under our ease yeah I think that's it then text-decoration:none let's keep it black for now okay so it's saved and I have to clear the configuration the cache there's a to clear the clashes it should rush you can check Josh documentation and how to clear dashes in the link provided below in the video description let's go back to site okay so yeah our links have been the font size of our links are changed color is changed and we can see that the style sheets is working okay so let us go back and well I think that this not being what it seemed to me mmm-hmm contextual region yeah that should have been okay so now we're just going to tile our whole page and we're not then we will come back okay so yeah snack bar and P short header nav should be the top right message to us yeah all the HTML not here okay here comes to okay I'm going to use the if statement for pig it's heading one if not what level is present then no dot label else I'm sorry from labor is present no thought table as no here from site name the site would be really I think this is the class for that or site name I think this is the class for site name then and if and let's close this heading Firestar header is done let's go to contend with start content let's give it a I to it I don't think I just is very position related to Hayden and okay so for the footer height is done this is done padding well parting left would be 20 pixels 20 bit we like this apart into individual things I hope be fine I know there is the menu is not appropriate I'll just fix that also the menu top menu it had already has a class that's on top maybe this yeah so I'm just going to give it glasses and oil it's list I already have the class I'll just I'll it color is given position will be I think relative or up your relative text-decoration:none I already have given that just right center and font size 20 things let's just this out that's also for starting let's disable these blocks I don't need this yeah stated message I can I'll disable this let's go back to site and you can see our team here powered by Google our home link is here this is the site name this is the home link I'm going to style this also I will study the wrong block yes this one I'm going to set this this ul it comes under nav rural area class contextual reason region I have to clear first let's check it you will lie yeah I think that would be nice just clear the black ash let's go back to side okay it has come to Center though and the font size has changed I'm will kid yeah I think that I think that the styling has come here also okay I'm going to yes the exact navigation ID is this one sorry I'm going to change it here I am going to do some more changes yep the list will be right this weight 50% power yeah I think that cutting this is fine and also think this is working this is it working well I think it is not side I'll just put here my site name and any more styling we need to do yep color has wheel from a let's clear cache okay let's refresh this okay so our name is UT Museum menu is here our content areas here this is the site name home we can remove that block why is that here okay so yeah I wanted to know how did he not change I know but I just remove these dots and also I'm going to have a runner here text-decoration:none okay so I think this is done for now and I'm going to give this a common the header heading and the menu link menu will come up through the break oh sorry at 200% on sizes 20 yeah hey I think this is fine and I'll kill just padding to it I think our basic temperature is really sorry I started let's refresh this oh the spirit ashes okey i clear - you also should the footer is not at the bottom now that I'm into - good autumn also position:relative here cache it again I'll refresh this okay yeah so the basic site is ready the basic team I think is fine and also we can get some padding here if you want to okay so let's get fighting also I think that I would I think I would bring the menu down here that would look better right so this was the one right floor won't work with position:absolute so I'll have to give it not see index five okay Oh menu and now let's bring this down okay dzifa box well it went down there actually it looks like you then batting is pretty nice actually padding is working fine and yeah side looking for me just let's bring this up here okay yeah I think it should go up there oh no this is fine this should absolutely right yeah let's go oh yeah you'll have to clear goddesses I know this is big effective clear caches of you know again but you have to you know the CSS files to clear the cache to run give us more stable Caesar mmm-hmm why go up there oh sorry the margin was too big yeah should be wait a minute yeah that's what I thought so yep let's give it that yeah well comment out this will go and out just and let's make it to 80 that is some padding there also I think every element of this is one well this is the every element right but it will change the bottom and also let's do that find my knee well let's give it a border to pixel solid you have that for look good and we have a padding right move this padding would be we'll have to increase this padding at least to 10 so where it looks good that's clear cache and I think that the site is ready gosh also the site name I think the other thing let me refresh that page okay so the block became this big that is okay whipped oh that changed too oh yeah let's give a big top 10% Oh tiny boss and I would say so that up any mess could also join it totally nice off the menu also to display:inline feel the true pastor cashes also this right here is just a lovely image and this is the home link image to heaven we put our image logo image here the logo of our team would apply here also we can put a background image behind this the the footage of the home at Hilton footer menu is also here you just wait for Matt this one let's brush our crashes okay so I sell fresh okay now if we have this then there's test on menu let's edit menu okay we have a home link let's add a link when you digest and we can see that the format little bit more and I like this are you ready also in fact I'm going to add our animation to it so for that and keep the border here and transition and let's make it zero so you can see that we have a smooth transition for menu let's refresh see ya oh yeah the bottle is coming up but look back on cannot want to change oh sorry I had to do this yeah now it will work and it will be fine it's your cash that's how we pay it tuple team using twig from scratch we supposed to file we created wait what is first of all we created a fixed or informal file in which we put either name description type and the information of our team indicated a library file where we linked our CSS file and then we created a page or - Stephen Dodd click file so this file contains the basic structure of our team what all compares our team has and style dot CSS file then style these you add additional styling to the component so that's how that's all I think yeah we can see this it's smooth and that's how we create team so thank you

Channel: Vansh Sood

Views: 5,033

Rating: 4.8536587 out of 5

Keywords:

Id: eDe2hr5lJHI

Length: 46min 35sec (2795 seconds)

Published: Tue Dec 11 2018