Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've migrated all of the templates, the last thing to really do is take a look at a side-by-side comparison of the Drupal 6 and Drupal 7 sites and see if there are any CSS changes that need to be applied in order to get the two versions to look alike. The first thing I am taking a look at here is the homepage on the Hansel & Petal Drupal 7 version. I can distinctly see a background graphic being applied to the heading and then if I tab over to the Hansel & Petal Drupal 6 version, I don't see that.
So let's tab back over to the Hansel & Petal Drupal 7 version and using Firebug actually take a look at what's causing this. If I click on the element and inspect it, I can see that this is actually a block system main. So remember, with Drupal 7, content was moved into its own region. Because of this it became a block and the styling from the migration says that any block gets this background graphic.
Well, we need to modify this to remove the background graphic for the specific ID. So if I actually highlight the ID, copy it and then browse back over to my editor and scroll down to hanselpetal7> sites>all>themes>hanselandpetal7>assets, and then open up my CSS folder and go to my style.css, I can scroll down to the bottom of the page and add a rule for these overrides.
First of all, I'll make a comment of DRUPAL 7 OVERRIDES and then add a reference to that particular ID. Next, I want to say background: none. I am going to save this, browse back over to my Drupal 7 instance and hit Refresh. I have now removed that background graphic. The other thing I want to take a look at is if I scroll down to the bottom of the page, I can see that my footer navigation is kind of hugging to the bottom and if I compare it to the Drupal 6 version, I can see that I actually have a little bit of space there.
So it's more evened out. Go ahead and tap back over to Drupal 7 and then inspect this with Firebug. I can see this it belongs to the block- system-main-menu and if I select this div, I can see that any block gets a margin-bottom of 1em. I need to override this. So again, I'm going to click on the ID, copy the name of the ID, tab back over to my editor, and add another override, this time for the ID of block-system-main-menu.
I want to give this a margin-bottom of 0. Go ahead and save this, tab back over to my Drupal 7 instance and hit Refresh. I now see the navigational element pop back up and be more in line with the Drupal 6 version. There's only one other thing I want to take a look at, and that is on the Services page. For the Services page, it's actually quite short and that's because with part of the migration and even on the existing Drupal 6 theme, they decided to hide the sidebars, but not actually expand the page content.
While it's not part of the Drupal 6 theme, I think it would make sense to actually expand the content on the page since there is no sidebar to display. So let's actually use Firebug and inspect this particular page. If I scroll the top, I can see that it's actually called page-node-6 and this is the class name that's being added for the specific note. I can then click on the div with the ID of Main and see where this particular width of 390 pixels is being set.
Let's go ahead and widen that a little bit. Tab back over to our editor, scroll down and remember, this is a class, so we are going to do a .page-node-6 #main. The rule for this is going to be width: 700 pixels. Save that, tab back over to my Drupal 7 instance, close Firebug, and refresh. So there we have it. We've completed our migration from Drupal 6 to Drupal 7 and I hope that you can see that it is actually quite simple if you do it on a step-by-step basis.
Get unlimited access to all courses for just $25/month.Become a member
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.