Drupal 7 sub themes a very simple how to guide.

hello I want to show you how to make a really simple really easy sub theme for Drupal I'm going to go through the process first so you can see what I do and then I've got some screenshots with the information on and I'll sock it throughout I've finished so that if you if you want to do this yourself you'll be able to come back and stop the video on the different screen shots you got from like page 1 page 2 page 3 pardon me say so it makes it easier for you to follow the process so first of all what we need is when you log onto your web space you'll see this these are these all the files and folders are in your web space when you when you install Drupal so if you got Drupal installed on your web space this is what you'll see but what we need to do I'm going to make a a sub theme for the Bartik theme that comes with Drupal but we need to have the basic thing and the sub theme in the same directory so that I've downloaded complete version of Drupal this is Drupal 7 are downloaded all elected it will open the whole look in the themes folder and there's batiks I'm going to copy that and then I want to put it not into themes for this is back on my web space don't put it in the themes folder I was pulling sites all themes and this is where it's going to go so that's number one that batting film that we've copied in there now I want a copy of that so I'm gonna list twice but I've two of these but rename that chuckle that's it Bartok and my sub theme so this is going to be my such thing at the moment is exactly the same as Bartok except having a different name right so now we open up this something I'm going to delete everything the path from screenshot logo is this info and that so gonna delete template PHP deleted templates deleted images deleted and color deleted all we've got left is the CSS directory magic dome for logo and the screenshot all right so next we're going to we're going to open the CSS directory and delete everything except about one file just see style.css we're going to keep but everything else we're going to delete keep the style.css delete everything else alright now we're going to rename this - my sub-theme CSS correct now we want to open this and all lives all the information inside it we're going to delete so it's empty my sub thing that CSS is now empty that right now we want to go back into my sub thing folder so by if open up my sub thing and this bat seek that info we want to change the name of that - my sub-theme bottom floor they want to open it up we've got to make some changes now on the VM I've got got some slides to show you after this and I explain in more detail about what I'm doing here but this go I'm good I'm going to delete these three of these and delete them I'm going to change the name of one of them that one I'm going to change it to be my sub theme I don't see it and we've got to change somebody's going to get rid of this package and version we're gonna change the name of that I'm going to add another line that a base theme so what I'll do right my wife changed this is what you want to end up with you don't need to worry about from when it says regions here all that you don't need to worry about just ignore all that what you need to worry about is this bit here but style sheets call this thing discretion and name now I'm going to explain these all in the in the in the slides but basically these are the things that you need to worry about we got up the name equals my sub thing before it said nearly equals biotic so it changed that if you want to put this different description there you can though you don't have to but you if you want to attend them this base thing wasn't there before and and that tells Drupal that this is a sub-theme and is the the best that the best thing that lists of theme works with is Bartok this just tells Djokovic it works with a Drupal 7 not Drupal 6 and this to have just told it about a different style sheet alright so let's save that I think we've done everything we need to do so we'll go back to triple have a look this is my Drupal installation and I've stopped made all the changes inside this using FTP so now if we click appearance look at the bottom it got a new sub thing this is something we've just made so we click enable and set a default when it says something you've got to have the best theme we've got bat ik which we put in there as well don't need base theme and the sort of thing so in a balance as default for the sub thing we've just met now this one motor will disable that island really and ever that was the Bartok the best thing but but actually using a different one just so Drupal don't get confused will disable it and then re-enable it because in two different directories these what we've used here so this is default right well we've got now we've got my sub theme that's something we've just made and we've got basic seven-point-seven from Drupal seven point seven now the bats equip we're using now is a different version than will be using originally but because we put both of these into one directory I don't know if that matters but we'll do it just in case they've got to be in the same directory and whether you need to re-enable I'm not sure it works either way but it's always better to be safe than sorry so let's go back click Save configuration and we should now see no change the reason we see no change is because we're making a sub-theme of this above the basic thing now the beauty mix is all we need to do to make changes is to go into the CSS file which is now empty for any changes you want in that CSS file and it will override all of Drupal's original settings it's a really easy way to use some things to make a sub same as usual I'm going to explain all that to in the next video also what we'll do now goes through the the screenshots are made for you to explain what I've done and then if you get confused just come back to this bit of a video and slowly goes through with different screens you'll stand stopped the video of these with these screenshots and it'll tell you what to do so important your sub theme must be in the same directory as your base theme we're going to use the Bartok thing because it is the theme built into Drupal 7 but we can but we will download a new version and puts it in the site's all themes directory along with our sub thing we cannot download Bartok of the standalone theme we need to download the full Drupal 7 installation and copy the Bartok scene from the themes directory of Drupal 7 with an upload basic into the sites all themes directory of our website alongside our something I'm calling my sub theme my something so we need to make two copies of party we will rename one copied the Bartok to my sub theme and we will change the met we will make changes talk my sub theme and then upload that's it and my sub thing to the sites all themes director on our web server right so we copy the theme directory we want to use which were using Bartek rename the copy directory with your subfamily my sub thing delay everything in my sub same folder except for logo.png screenshot PNG patsak de info and CSS directory then delete everything in the CSS directory except styles.css open styles dot CSS click your pointer to lock it inside the file press ctrl a to select everything then press Delete to delete all the contents inside style that CSS save the empty styles dot CSS file has my sub theme got CSS so I change it from styles or CSS to my sub thing of CSS now we have a CSS Directorate with an empty my sub theme CSS file inside it bat-signal file screenshot image and a local image next we rename the bat-signal info file to my sub theme time for we open my sub same time for change name equals Bartek to name equals something so it that these are the things we did in that term that there we go we're talking about this bit here all right delete the lines package conversion de clay our new style sheet to that one delete all other style sheets and then add the line best theme equals Bartok so a little bit list miss this page is in part if when you're doing this bit of the process if you get confused come back and look at this page right so the things we have left in the game profile when we change the names romantic Davenport to my stop same time for how things are not inherited from the best thing to be used by their new sub name almost everything we were in a drupal sub thing is inherited from the base theme which means the thing that makes it really good now the only thing you need to do to make it work you've set it so your your sub theme is now active now you won't see any differences here because it's almost it is identical to this one but we're going to change that in the next video making another video about how to make changes in this theme using a thing called fire book so watch this video if you doing this yourself make sure you backup everything before you start always we're never doing anything back up before you start back all your stuff up before you start then you won't lose anything and a little bit there because afternoon make it a short video that won't fit on YouTube but come back and watch the video about fire fire book and how we can use fire book to change things like the background colors the font size the font type or all different kinds of things so I want to pop back and thanks for watching bye

Channel: Philip Gledhill

Views: 22,350

Rating: 4.8241758 out of 5

Keywords: Drupal 7, how to, themes, web design

Id: R0i5P3QGm5s

Length: 13min 12sec (792 seconds)

Published: Fri Sep 02 2011