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

Converting miscellaneous templates and cleaning up CSS

From: Drupal 7: Creating and Editing Custom Themes

Video: 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.

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.

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 · 12227 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.