Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Recreating HanselAndPetal content, files, and the .info file

From: Drupal 7: Creating and Editing Custom Themes

Video: Recreating HanselAndPetal content, files, and the .info file

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.

Recreating HanselAndPetal content, files, and the .info file

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 admin@localhost.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.

Show transcript

This video is part of

Image for Drupal 7: Creating and Editing Custom Themes
Drupal 7: Creating and Editing Custom Themes

42 video lessons · 12220 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 5m 58s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 4s
    3. Viewing the finished project
      2m 51s
  2. 23m 21s
    1. Installing Drupal 7 (Mac or Windows)
      7m 23s
    2. Using a development environment
      3m 36s
    3. Installing contributed modules
      3m 43s
    4. Using the Administration Menu module
      3m 55s
    5. Using the Backup and Migrate module
      4m 44s
  3. 15m 35s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 55s
    3. Using the Block Class module
      3m 17s
  4. 9m 42s
    1. Exploring the Appearance interface
      3m 20s
    2. Choosing global and theme-specific settings
      2m 55s
    3. Installing prebuilt themes
      3m 27s
  5. 10m 40s
    1. Anatomy of a theme
      2m 57s
    2. Structure of a theme
      1m 52s
    3. Understanding templates and variables
      4m 11s
    4. Exploring the theme registry
      1m 40s
  6. 27m 23s
    1. Exploring the Bartik themes folder, file structure, and .info file
      5m 45s
    2. Exploring how CSS references work in Drupal
      10m 49s
    3. Exploring how script references work in Drupal
      5m 7s
    4. Exploring regions and how they are referenced in a theme
      5m 42s
  7. 11m 5s
    1. Using the Backup Migrate module to create content for a web site
      2m 33s
    2. Creating a theming roadmap
      3m 10s
    3. Creating a theme folder, theme structure, and a .info file and enabling a theme
      5m 22s
  8. 54m 5s
    1. Customizing HTML templates and variables
      5m 29s
    2. Customizing page templates and variables
      13m 43s
    3. Creating regions and rendering page variables
      11m 36s
    4. Customizing region templates and variables
      53s
    5. Customizing node templates and variables
      4m 49s
    6. Customizing block templates and variables
      12m 14s
    7. Customizing view templates and variables
      5m 21s
  9. 13m 36s
    1. Removing unnecessary modules
      2m 46s
    2. Optimizing the CSS and JavaScript
      2m 45s
    3. Enabling caching
      4m 43s
    4. Exploring the performance settings
      3m 22s
  10. 44m 19s
    1. Recreating HanselAndPetal content, files, and the .info file
      14m 0s
    2. Adding an HTML template and modifying page templates
      11m 25s
    3. Converting node templates and page variables
      10m 30s
    4. Converting block templates and page variables
      3m 41s
    5. Converting miscellaneous templates and cleaning up CSS
      4m 43s
  11. 1m 11s
    1. Goodbye
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.