Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Installing Drupal 7 on Mac or Windows
- Using the Devel and Theme Developer modules
- Understanding templates and variables
- Choosing global and theme specific settings
- Creating a theme roadmap
- Creating the theme folder, structure, and .info file
- Customizing HTML templates and variables
- Creating template regions and rendering page variables
- Understanding performance considerations such as caching
- Migrating themes from Drupal 6 to Drupal 7
Skill Level Intermediate
Now that we have our content in place, it's time that we begin to create our theme folder and base structure along with the .info file and any of references to stylesheets that need to be applied to our theme. We will also review the Drupal HTML output and discuss what steps we need to take to get the Drupal output to match our static HTML. Let's begin by browsing to our editor and expanding these sites>all>themes folder and let's go ahead and create a new folder for our theme, so right-click and say New>Folder and give it a name of samoca.
Now that we have the samoca folder, we need another folder to hold all the assets. Right click on samoca and say New> Folder and give it a name of assets. Now if we expand the Exercise Files for 06_03, I want to copy in both the CSS and the images into my assets folder. I'll go ahead and select both of those, right-click say Copy, tab back down to my assets folder, and paste them.
Now that I have my assets in place it's time that we create a new file called samoca.info. This will hold all of our theme's metadata. Right-click on the samoca folder and say New>File. We are going to give this a name of samoca.info. The first thing that any theme needs is a name and this is a required field. So let's go ahead and add that now, name = Samoca. Next it would be nice if our theme actually had a description.
While it's not a required field, it is highly recommended that we add it. Let's go ahead and add that now, description = A custom theme for SAMOCA. Next we need to add the required metadata to specify which version of Drupal our theme is compatible with. This is core = 7.x. Remember that if you do not specify the core or specify a version less than the current Drupal instance that you are using, you will not be allowed to enable this theme.
So make sure that you specify the proper core for the theme that you are developing. Let's go ahead and save this, browse back to Drupal, and then navigate to the Appearance interface. From here we want to locate our theme. So scroll down to Disabled Themes and we see the new theme that we've started to create. Go ahead and click on Enable and set default, close the Appearance interface, we are now seeing that default Drupal HTML output which gives us a good example of what styling, if any, gets applied by the core and contributing modules.
And we could technically create a theme by creating a Style Sheet directly addressing the default elements and classes that Drupal outputs without even touching a template. However, let's add some CSS so that our theme starts to take shape. Begin by browsing back to your editor. Go ahead and tab down a couple of spaces and let's add a comment for CSS. If we scroll back up to the Exercise Files, we see that we already have a copy of the samoca.info file.
Let's go ahead and open that and I want to copy the four references to stylesheets. Go ahead and paste those in and then I'll go ahead and discuss what's happening here. First of all there is a stylesheets array. The stylesheets metadata references the actual location where our stylesheets reside. In this case we are saying stylesheet, all, equals assets/css/reset, typography, layout, and drupal.
Now that we have the metadata in place for a theme, we can save our .info file, tab back over to our Drupal instance, and Flush the page cache. Now we're beginning to see some of the theme's characteristics be applied. Let's go ahead and quickly open up Firebug and take a look at the head element and scroll down a little bit to where we can actually see the reference to our stylesheets that Drupal is outputting. So we now know that our metadata information is being picked up by Drupal and outputted properly.
Go ahead and close Firebug and if you'd like, you can go ahead and start comparing this to our static theme, and as you see, we're not quite there yet, but we are picking up some of the styling. For instance, we have some background graphics that if we take a look at our Drupal instance are starting to be picked up. We'll slowly keep working through this and modifying templates so that our HTML output and our Drupal will slowly begin to match. It's time to discuss exactly how we need to get the HTML and page content to match our static website a little better.
Let's move on to reviewing the html.tpl. php and page.tpl.php templates in Drupal 7.