Creating a Theme for drupal 8 from an existing HTML site

hey everyone this is an academy again and this screencast I'm going to show you how will create a new propeller theme from an existing HTML template okay so here I've created a HTML site called flat tax flat tax raw I'll name the folder because we have to convert it into a duplicate theme so let's open it and let me show you how it looks right now let's open it with our browser okay so we have animation fans over here and we have used materialized CSS we can see this parallax effect over here and this will be our main section when we convert it to a duper theme and here we can again see parallax effect and this one is the footer okay so let's get started converting this theme okay so first of all we need a new document which is info dot Yama file let's name it flat X dot oh wait let's just create another folder from which we make the theme and this will also let us walk through the code and so on let's name this flat X let's open this one dude okay so here we have index dot HTML file so then we will move it here it will become face not HTML not twig this is the 12 template I told you about this in my previous issue in class it will help us render the content from Drupal site as we specified here and work on it is needed right now and let's get all the assets will be there so yeah we have phones over here you get the fonts the images we are using out in the team yeah in let's have all these tiles over here so that these are all the assets of our team we don't need this one anymore so now let's create a new document we are going to name it it will be an info tamil file so let's name it the flat X dot info dot human the next file we are going to create a Planet X dot libraries dot Yemen yeah we have all the files ready now we can start so open it in your 4-digit I'm I'm using Visual Studio code okay so we have started working on flat X I had this doll find earlier so so let's start off with info dot EMF I will give it the name plot X will give it the type it's the same of course then we will give it our description as a profile a CCI is screencast the description is enough so now let's at the core code is read dot X and then the library so here we are going to define the libraries that takes forward slash so now let's select a name for the library you can say yeah like this is a look it yeah it sounds good practice ism now let's define the regions me needle so first of all we need all the okay and after the fourth we have content all the main content stuff next yeah we don't need any sidebars because I don't think this thing will be compatible with it but still we can tweak it and make it compatible with it so we're done with it so since we don't need any sidebar so we can disable them so again in regions underscore a today we can mention them there so we don't need sidebar first we don't need the second sidebar okay it let's save it and you have yeah we are done with our info tml file now let's start with the libraries not a man fine so we named it we named the library in the in 40ml file we named the library flattest ism okay so make sure the library name is correct when you are when you are defining it in like that is not yemen so fanaticism version 1.0.0 and then the CSS and now we mention all the CSS files we need in here so we need an email dot CSS CSS then we need ya the style dot ceases and everybody realize what's cases but they realize not ESS we need is our style dot CSS style dot yes so we are done with our libraries taught UML file also let's save it no yeah we have all the files in here we don't have created separate folders so what we will do is we can remove these directories from here so that it doesn't get through this is scripting or what is testing here we have everything therefore the pace not estimate of doing nothing is the remaining 210 now let's move to our CSS file again we don't need this because we have the fonts in the root folder only and saying that they make this game this and they're saying that this so now we are done with our CSS file no wait there is one more remaining okay that's all we are good with our CSS file and now let's come back to HTML dot break let's close this and open that info document file we read header footer and the content so in the and the other we can we can then there are header things on the right side of the navbar that's why it works so here our face dot again then we need to render the content so here will be our content so type in here mail dot and so this will render the content and after we are in the footer after the so before this line made by any case DVD let's create another set of them and we are going to render it in here we can give it some classes I want a two week diet from before and I want that X color to be great so x2 me yeah very text awesome so now here you can tender content of our footer we write fails not to put that we don't have any bread crumbs in it we don't need it in this theme you also save all the files and exit the editor and now we are ready to use our theme so this one is our final theme let's copy and move to our drupal installation directory which is a lamp stack apache2 htdocs drupal in the themes folder i'm going to paste it so we have flat text now okay so again open the browser and we will now head up to our local inside so right now it has a it has the theme which I made in my previous in screencast it doesn't look that good doesn't look kinda good right so let's head up to appearance let me show you how it looks actually okay so this is how it looks we have text the navbar here and all that you can watch it in the previous screencast so right now what we need to do is we are going to install and set as default flat X we can see here so let's install it and set as default let's get it and get it installed okay so now we have flat Tech's installed so we can reload this page so you can see that it's working but you know we have this thing in here we can fix it right yeah we don't want one this to be displayed let's check what was wrong they head back to the direct flight head back to a directory where we have duper in soil it's that you to htdocs themes flat X see you has then 40 ml file okay so I've got dibs on you everything's okay we just don't need this header to leave the sidebar and all that things are included in the header instead we can fold out this one now we can have some links so now I'm going to clear the cache configuration development performance and we'll clear all the cache and this will help us fix this thing because this I will not be decided that we want the header on the right and actually we had at the surgeon all these things are present so it's wait for the cache to clear now the cash is cleared now so we can move our website down refresh the page and you can see ok so awesome we have working all the working animations and we have dead link over here home and now we can see great we can see our post here and this what is that random text which I was talking about amazing yeah so this is how we can make themes let's access my first blog post so again it's working we can read it okay so this is how we create themes and open it using existing HTML files so that's it for now goodbye thanks for watching

Channel: aniketdvd

Views: 1,777

Rating: 4.8571429 out of 5

Keywords: Drupal, Drupal 8, Theme, HTML, css, materialize, gci, google code-in

Id: Il5DPLHuFHM

Length: 17min 52sec (1072 seconds)

Published: Fri Nov 02 2018