Check your version

This video 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.

Introduction to the Domicile Theme

Video loading...

  • 0:00
  • 0:00
    Introduction to the Domicile Theme
  • 0:01
    with Emma Jane Westby
  • 0:08
    The design we'll be working with in this video series
  • 0:10
    was created by Betty [? Bizynthal, ?] specifically
  • 0:13
    for students to learn how to theme.
  • 0:15
    It's a fairly simple design with only three columns
  • 0:17
    and an image up at the top.
  • 0:20
    In this lesson, we're going to take a look at the features
  • 0:23
    of the design, how the theme will be built out, and the things in Drupal
  • 0:28
    that we need to create in order to work with our theme and our design.
  • 0:33
    Are you ready?
  • 0:34
    Let's get started.
  • 0:38
    Throughout the series, you're going to learn how to build this design.
  • 0:41
    It's fairly straightforward with three columns, the first
  • 0:43
    for navigation, the second for a featured or decoration area,
  • 0:48
    and the third for content, which on the home page
  • 0:51
    is subdivided into three distinct areas or perhaps two
  • 0:55
    distinct areas, one of which has two pieces of content displaying in it.
  • 1:00
    This theme is a rewrite of one that was
  • 1:02
    originally created a couple of years ago.
  • 1:04
    The original theme is available for download
  • 1:06
  • 1:10
    When this theme was originally created,
  • 1:12
    it was built using the 960 base theme.
  • 1:15
    This base theme is a simple adaptation
  • 1:18
    of the 960 grid framework.
  • 1:20
    We'll be incorporating the grid framework directly into our theme
  • 1:24
    using a plug-in, which generates a bunch of the SCSS files for us.
  • 1:29
    The design, shown here, has also been
  • 1:31
    adopted by a few others on the internet.
  • 1:34
    The first four, kidactive, the second four, digitisethedawn.
  • 1:40
    All the same basic layout, it's just the images
  • 1:43
    that have been swapped out.
  • 1:44
    Even though the way the theme was constructed has changed,
  • 1:47
    the site build is approximately the same.
  • 1:50
    Let's take a look at the administrative area now.
  • 1:53
    The customization that was done for our particular theme
  • 1:56
    was to add some custom blocks, the pull quote in the center,
  • 2:04
    a couple of menus, and also the footer.
  • 2:09
    The content we had to make some decisions
  • 2:10
    around in terms of how to split up those two areas on the bottom
  • 2:16
    and also the big area on the top.
  • 2:18
    And there's lots of different ways that you can approach that.
  • 2:21
    We've done it by creating one custom block
  • 2:23
    and then by having the river of news subdivided visually
  • 2:28
    into two distinct areas, just through CSS.
  • 2:31
    You will also do some customization of image styles.
  • 2:35
    And that's done through configuration, and then
  • 2:39
    image styles.
  • 2:40
    You'll be customizing the thumbnail, which
  • 2:43
    comes with Drupal core down to a 60 by 60 square.
  • 2:47
    You'll also learn how to generate some fake content
  • 2:49
    with the devel_generate module.
  • 2:52
    We'll be generating both fake content and also some fake menus.
  • 2:59
    Well, I suppose they're actually real menus,
  • 3:01
    but they've just got lorem ipsum in them.
  • 3:03
    I don't spend a lot of time explaining the 960 grid framework,
  • 3:06
    but let's take a look at how quickly you'll be able to snap together
  • 3:10
    a layout with about 15 lines of SaaS.
  • 3:15
    Here's our layout file that you'll be using.
  • 3:17
    You'll import a couple of SCSS file into your layout file.
  • 3:24
    You'll set the number of columns that you want to use and then
  • 3:28
    simply decide what names you want to use for your layout.
  • 3:34
    Notice the semantic naming here.
  • 3:36
    And then assign the number of grid columns
  • 3:39
    you want to use for each of those different areas.
  • 3:42
    So long as these class and ID names are used correctly
  • 3:46
    in your page.tpl.php file, the layout
  • 3:49
    will just snap itself together.
  • 3:51
    It's an absolute delight to work with
  • 3:54
    and means that you are in far more control over the naming
  • 3:57
    of your classes and layouts than you were
  • 4:01
    in the previous version of this theme.
  • 4:04
    If you'd like to compare what it used to look like and what it does
  • 4:07
    look like now, and the advantage that SaaS gives you,
  • 4:10
    I encourage you to download the original theme from
  • 4:13 and take a peek at what the CSS looks like.
  • 4:19
    It's still fairly short, maybe 150 lines of code,
  • 4:22
    but it's a completely different approach as far as the naming goes.
  • 4:26
    So that's a quick overview of what you'll
  • 4:27
    be working on throughout this learning series I hope you're
  • 4:30
    excited to get started on going from design to theme.
Loading ...

Introduction to the Domicile Theme


In this lesson we'll take a tour of the theme you'll be building. The design we'll be working with was created by Betty Bisenthal. It's a fairly simple design with three columns and a banner image. It has been used as a starting point for several years by many people who are learning to theme. In this lesson we'll take a look at:

  • the design we'll be working with
  • variations of this design created by other students
  • how Drupal was customized to accommodate our design
  • the Sass used to create the layout for the site

By the end of this lesson you'll be able to describe the shape of the design used throughout this series, and identify variants of the design.