Drupal Tutorials #5 - Creating a subtheme

yo what's up this is Scott with level up Tut's and today we're going to be going over creating a sub theme for Drupal 7 with Omega so creating a sub theme with Omega can be a little bit different than some of the other themes and we will go over creating sub themes of different themes if there is a demand but for the most part there installation processes are all sort of either unique or there's a readme file that will tell you how to do it this is just basically going to show you the basic process now Omega actually has a module that will create a sub theme for you when you give it the specified parameters that it asks for we're not going to do it that way in fact we're actually going to do a whole nother tutorial series on omega specifically because this tutorial is more about Drupal we're just going to show you the the by hand method so what we're going to do is we're going to go to appearance here and then you'll notice this brings up our appearance menu where we were before and you'll see Omega our default theme is enabled if you click here you'll see how to create an Omega sub theme and they'll tell you how to do it with the module without the module and it gives you nice basic instructions but that's actually we're going to show you here so this is a four step process the steps include you go to Omega browse to your file structure actually let's go to HT htdocs here so our folder is st so this fault this is located in sites all themes Omega and in here there is a starter kits folder and Omega offers a few different starting off points the this is alpha XHTML this is omega XHTML and omega html5 we're going to use Omega html5 the other two I don't think people are really intended to use alpha it says something about it on their on their install and then the XHTML is just a not html5 so we want the site to be current we want it to be html5 so we're going to copy this Omega html5 folder into our themes directory so that it sits next right next to Omega so you see here and we have now have Omega and Omega html5 what we're going to do is we're going to rename this we're going to rename this to what we want our theme to be named so this is going to be my own site everything so far has been st so we're just going to call this st again makes it nice and simple so that step one is renaming this to be the name of your theme next we're going to want to go into what we see is starter kit Omega 5 HTML 5 done info so we're going to change this also to be the name of your theme this will be st info now okay now we're going to want to go ahead and open this STD info file up and use sublime edit it's sublime text to my favorite text editor okay so we'll come in here so this is basically where you're saying to Drupal hey I got a new theme this is its name this is what it does this is where to look for files the st info or your dot info file in your theme is where you specify a lot of things where you specify regions which we're going to get into zones optional style sheets and a lot of other themes you'll actually specify your style sheets here omega likes to handle that a little differently and we're going to show you that so what we're going to do is we're going to change the name to BST the description well we can make this what we want it to be so theme for Scott's site okay core is so the next okay we don't need to change any of this if we want to give it a screenshot in the admin which we probably will once the the theme is finished we'll change that here and then of course the base theme is omega now as you'll notice here is this important delete these two items from your sub theme not every theme is going to have these items that Omega if you're doing it the manual a you have to delete these lines so we're just going to delete I'll delete the other line just to and let us know that there's nothing else to delete we'll save it okay well now all we have to do is two more things we just have to go through our CSS files that have your theme we'll see I'll show you right here and their CSS folder under st it says your theme - alpha - default narrowed CSS so what you need to do is all you need to do is change this your theme to your themes name on all of these like I said other themes you'll want to change the CSS or you don't even need to change the CSS because that will be declared in the info file however for Omega this is a step that you have to do to get this working okay so that is all set there so now we're going to go back to Drupal here and before we do anything well let's go ahead and clear the cache so I'm going to open up click on performance remember we added this in the last tutorial clear the cache and then when this is done we'll come back here and refresh this and you'll notice that we should have our new theme here it is st seven-point x - 3.1 we're going to enable and set as the default so now we have omega is enabled as you're doing what the sub thing you're going to want to keep Omega enabled and then your sub theme is st so what the sub theme is going to do is it's going to use its files whenever they're here so if we take and we duplicate any D files from Omega and edit them here and this templates we put them in here it's going to look for at st first and if there's nothing in st it's going to go to omega next to find those files so this is why theming is really powerful with creating a something because you don't want to change the you don't want to change the base theme if you do and let's say you break something or let's say there's an update to the theme you won't be able to really get very far so creating a sub theme and overriding is sort of the way to go here if you'll notice throughout these tutorials I'm going to start filling in the CSS I'm going to be using compass and sass for my CSS so if you want to learn compass and sass please we're doing compass and sass tutorials I level up Tut's they're already up we got maybe about sixteen seventeen up already so check those out I'm not going to be going into the CSS of this so if you do notice CSS change your style changes I'm going to be doing that outside of the tutorials okay well that's it for this tutorial in the next lesson we're going to go over creating your first piece of content in Drupal 7 once again this is Scott with level up tux if you have any questions please leave a comment hit us up at Twitter at LevelUp Tut's let us know what you think thanks a lot thanks for watching all right right

Channel: LevelUpTuts

Views: 86,424

Rating: 4.9099097 out of 5

Keywords: Drupal, Tutorial, software, tutorial, Data, Technology, Business, System, Management, Training, Systems, Information, Computer, Design, Using, xampp, drupal7, installing, level, up, tuts

Id: bQpK_WLlaCU

Length: 7min 27sec (447 seconds)

Published: Mon Mar 19 2012