Converting miscellaneous templates and cleaning up CSS
Video: Converting miscellaneous templates and cleaning up CSSNow 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.
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.
- 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
Converting miscellaneous templates and cleaning up CSS
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.
Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .
Here are the FAQs that matched your search "" :
- Q: The Acquia Dev Desktop Control Panel won't open after I restart my system. Is this a bug? What can I do to fix it?
- A: Some Mac users are having semi-serious difficulties with the Acquia Dev Desktop Control Panel repeatedly failing to open after routine system restart. See here and here for details.Fortunately, a reasonable work-around for an otherwise crippling issue is running this shell command in Terminal:Panel.app/Contents/MacOS/AcquiaDevDesktopControlPanelAcquia Dev Desktop Control Panel is not the only solution available. As an alternative, Mac users can switch to MAMP and Windows users can switch to WAMP, until this issue is resolved permanently.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.