Viewers: in countries Watching now:
Drupal 7: Creating and Editing Custom Themes shows the tools and techniques needed to build custom web sites with Drupal. Author Chaz Chumley introduces Drupal theme administration and takes a look at basic theming concepts, such as templates, regions, and variables. The course explores how Drupal default themes are configured and structured and how to install and edit a theme. The course also explores the tools a designer needs to create a Drupal 7 theme, using HTML, CSS, PHP, and Drupal templates, or migrate an existing Drupal 6 theme to Drupal 7. Exercise files are included with this course.
With all the changes from Drupal 6 to Drupal 7, one of the tasks that you may be asked to do is migrating a theme. We will be discussing the steps involved in converting a theme from Drupal 6 to Drupal 7, we will migrate files, create a new theme folder, and discover how to make slight modifications to the .info file. This should allow us enable the theme for Drupal 7 and the actual theme that we're going to be taking a look at converting is the Hansel and Petal theme developed in the Drupal 6: Creating and Editing Custom Theme series.
I'm going to assume that you've either completed that series or you actually have a real Drupal 6 site in need of conversion to Drupal 7. The first thing we need to do is actually set up a Drupal 7 instance. We also want to browse over to the drupal.org site/download, because we want to make sure we have the most current core version of Drupal. So from here, we can see that we can download the Drupal 7.10 Core. Go ahead and click on this, scroll down and find the 7.10 version and then either click on the ZIP or the TAR file and Download it.
Here we see the drupal-7.10 Core, and I realize by the time you begin the watch this that, that Core may have changed, but you want to make sure that you do get the latest Core for this process. Go ahead and extract the Drupal Core, and then once I have this folder in place, what I want to do is actually right- click on it, Copy it, go to my web root; in this case it's my Sites folder, and I'm going to Paste it in place, and then I want to rename this to hanselpetal7.
Next I need to actually open up the Acquia Dev Desktop. From here, I want to go to Settings >Sites, and then click on Import. I then want to browse to that hanselpetal7 site that I just dropped into the Sites folder. So click Browse, locate hanselpetal7, and then click Choose. I also want to create a new database. So choose the Create a new database option, and for the New Database name, we will call it hanselpetal7.
Under Domain, for the Server, we're going to call it hanselpetal7 as well, and then I'm going to click on the Import button. This should now open up in the browser and be under the Select an installation profile window. I'm going to go ahead and leave the Standard installation as the default and click on Save and continue. For the Choose a language option, I will leave English as the default and then once again click on Save and continue.
As this runs through the installation profile, we're going to be presented with a screen that's going to ask us to enter some more information. For the Site name, we'll actually go ahead and leave it as hanselpetal7. And for the Site e-mail address, go ahead and enter an e-mail that you're going to be able to remember. In this case, I'm going to enter email@example.com. For the Site Maintenance Account information, for the Username field, let's go ahead and add admin as our username. For the Password, we will add drupal.
Once again, this is for demonstration purposes only and I'm not worried about the Password strength. I'm going to go ahead and leave the remaining defaults and click on Save and continue. Once the Drupal installation is complete, I can go ahead and click on the Visit your new site link. Now that we have our base Drupal 7 instance for the Hansel and Petal theme, we need to populate it with some data. Let's begin by browsing back to the Acquia Dev Desktop. Go ahead and click on the OK button to take yourself back to the main interface and then click on Manage my database.
Choose the hanselpetal7 database. And then for Structure, make sure that tab has focus and scroll to the bottom. Click the Check All link and then in the drop-down choose Drop. It's going to ask, do we really want to do this? We're going to go ahead and say Yes. And what we have done is successfully dropped all of the tables, along with the data, for the default Drupal 7 instance. The next thing we need to do is actually import back in all the content that makes up the Hansel and Petal website data.
We can do that by clicking on the Import tab. We can then click on the Browse button, and from the Exercise Files, we want to locate 09_01>completed folder, and click on the hanselpetal7.sql.zip file. Click on the Open button and then click on the Go button. Verify the action was successful and then browse back over to the hanselpetal7 website.
Go ahead and Refresh the page. Now we're starting to see the data that makes up the hanselpetal website. However, there are a few more steps that we need to take. One of those is that the data in the database may have a reference to images or files that were uploaded through the Site Administration Panel. Those images would have resided in the files folder of the previous hansel and petal Drupal 6 instance. We need to actually copy those files over to the new Drupal 7 files folder.
If we browse back over to our Finder, we can locate the Exercise Files, scroll down to 09_01, and then identify the files folder. We can right-click on this folder and say Copy. Then go to your web root; in this case, mine is Sites, hanselpetal7, sites folder, and then inside of here you're going to see the hanselpetal7 folder, which contains the files folder. I want to right-click and Paste this in place.
When it prompts you to replace, go ahead and Replace it. Now with the database complete and the files moved over, let's browse back to the website and see if we see any changes. Go ahead and Refresh the page, and now I'm starting to see references to images that were uploaded to the database now display. Now that our data and files are in place, let's begin the process of creating the Drupal 7 theme for Hansel and Petal. Go ahead and browse to your editor, and in my case I need to make a reference to the new hanselpetal7 website.
So I'm going to right-click and say New>PHP Project, give it a name of hanselpetal7, uncheck the Use default location, and then click on the Browse button to locate the Sites>hanselpetal7 folder. Click on Open and then Finish. Now that I have a new folder to work with, I can expand the folder, locate the sites>all>themes folder, and inside of here I need to actually create the hanselpetal theme.
If I expand the hanselpetal6 Drupal 6 instance and look inside of the sites>all>themes folder, I can see that that theme name was called hanselandpetal. I'll go ahead and do that now. Right-click, say New>Folder, and call it hanselandpetal. Scroll back up to my Drupal 6 instance, expand the hanselandpetal folder, and actually grab the images folder and Copy it.
And then we're going to go back to our Drupal 7 instance and I'm actually going to organize the files a little bit better. So I'm going to right-click and say New>Folder, assets, and then Paste the images folder inside of there. I'm going to scroll back up, and the other thing that I want to be able to pull over is the CSS. Now, I've already made some changes to the CSS to make sure that everything works properly and I've placed a copy of that actually in the Exercise folder.
So let's actually grab that from there. If I scroll to the Exercise Files and then scroll back down to 09_01, and then look inside of the hanselandpetal folder here, and inside of assets, I can see the css folder. I'm simply going to Copy this into my assets folder for my Drupal 7 instance. Next I want to scroll back up to the Drupal 6 instance and take a look at the hanselandpetal.info file.
I'm simply going to double-click on it. I'm then going to scroll down to my Drupal 7 instance, right-click on the hanselandpetal theme folder and say New >File and create a hanselandpetal.info file for my Drupal 7 instance. The name and the description can come across without any changes. So I'm simply going to Copy those and Paste them. Now, if I go back to the Drupal 6 instance, the version and the engine I do not need.
However, the core I do, but the core here is equal to 6.x. I'm going to Copy this, Paste it in, and change the 6 to be 7. We want to be able to use this theme with Drupal 7. I'm going to go and hit Save, and then I'm going to Tab back over and take a look and see what else is in here. I'm going to actually copy the regions and then we're actually going to change some of the region names to better fit Drupal 7. I'm going to Copy those and Paste them in.
For the sake of time, I'm actually going to open up the Exercise 09_01 folder and then open up the hanselandpetal.info file. Within here I'm actually going to highlight everything and Copy it and then Paste it over my hanselandpetal. info file for my Drupal 7 instance. If we take a look at the new metadata added from the completed hanselandpetal.info, we can see references to style sheets that have been moved into the assets>css folder. We can also see that left and right sidebar have changed to Sidebar First and Sidebar Second, as well as we've added Help, Page Top, and Page Bottom regions.
The remaining regions are there, they've just been moved around a little bit to make more sense. Now, if I Save this and I Tab over to my Drupal instance and login, I should now be able to navigate to the Appearance interface and see my Hansel and Petal theme in the Disabled Themes section. I can now click on Enable and set default and then close the Appearance interface and see my themes start to take shape.
I can actually compare this with a Hansel and Petal Drupal 6 theme and see that I'm partially there for what I need to migrate. Remember, some things have changed, like the name for the navigational elements, and I don't quite yet have the content into the right regions. So let's take a look at doing that now. If I go back to my Drupal 7 instance, click on Structure, and then Blocks, I can now assign the content to the correct regions.
If I scroll down to the Help, I want to make sure that System help is assigned, and it is. If I scroll up to Content, I do see that the Main page content is assigned properly. For the Sidebar First, I do not have anything in there yet, which is why those blocks aren't displaying. So I need to scroll down and find the data for Navigation, User login, and Recent blog posts.
For Sidebar Second, I want to make sure I put the Search form and the Syndicate block into those regions. For the Footer, Main menu, which is currently there, and then for Footer Content 1, Who's new, Who's online; Footer Content 2, Ads; and Footer Content 3, Drupal News feed latest items. With those in place, let me hit Save blocks, close the Block interface and then take a look at the home page.
We're not going to see much change quite yet, because remember, we renamed some of the regions and Drupal 7 has moved some of the variables into their own regions, and we're going to need to take a look at addressing that. After migrating the data and files from the Hansel and Petal theme, modifying the .info file to be Drupal 7 ready and rearranging block content to display properly in our new regions, you begin to get a feel for how a theme migration should be handled.
Next we will begin converting the page. tpl to address the new HTML template and how to output new regions and variables.
Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.