Theming

Movie Project: Create CSS for Default Markup for Drupal 7

Last updated February 16, 2017
Categories
Up-to-date with minor version
7.x

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

This exercise will have you demonstrate an understanding of Drupal themes and how to develop CSS to theme the default markup created by Drupal, with particular reference to CSS naming conventions.

Goal

Add classes to markup and CSS to your theme to style your site.

Prerequisites

You will need the following knowledge and skills. If you need a review, check out the Additional resources section at the bottom of this page.

  1. Understand the basic concepts of a Drupal theme and the default classes provided by Drupal.
  2. Configure basic settings within a theme.
  3. Create Sass/CSS for Drupal elements.
  4. Configure PhpStorm to use Drupal settings.

Tasks

Configure your custom theme by uploading a logo, and disabling the site name and slogan.

Create a git repository for your Drupal installation.

Configure PhpStorm for Drupal.

Compile the CSS within your subtheme.

Create a Sass file to manage typography using embedded fonts.

Create a Sass file to manage the header and footer.

Recap

  • Configuring PhpStorm to use with Drupal makes development faster and more standards compliant.
  • Regularly add and commit your changes.
  • Use Drupal CSS coding standards when developing CSS.

Further your understanding

Additional resources

Creative Commons License

Drupal Training Resources by Damian Robinson are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.damianrobinson.co.uk.

Hands-On Exercises: Movie Project