In this lesson, we'll go over Webform's Global Settings. We'll learn how to attach forms and questionnaires to other content types besides the Webform content type. We'll discover how we can limit the list of available form components, set email header defaults, and take a look at the advanced options in Webform's global configuration.
Note: Webform settings are no longer set globally as described in this video. Instead you configure settings per content type. Go to Structure > Content Types and select the content type to edit. You can enable Webform for a content type in its edit form.
In this lesson, we'll configure email settings for the RSVP form. We'll go over the different email header options and customize the default message template, using special tokens that Webform module provides.
Now that we've created a webform node for our form to live, it's time to build the form itself and add the form fields that we'll use to collect responses. In this lesson, we'll add a textfield, select options and number inputs. We'll begin by taking a closer look at the webform in its final state to better understand where we're going, then we'll return to the webform node we created in lesson 2 and we'll add each form component, step-by-step.
this lesson, we'll configure Webform content type defaults and add our first Webform node.
Additional resources
In this series, Amber will show you how she gathered her wedding invitation responses on a Drupal site using Webform module. You'll learn how to:
- Collect data from users
- Build common types of form fields (including text fields, numeric inputs, and radio button option lists)
- View, export, and analyze those responses
- Automatically email responses as they're submitted
Understanding the basics of Webform empowers you to create your own custom forms such as surveys, feedback forms or your very own RSVP form. Dive in and learn the basics of Webform.
A theme is comprised of a collection of related files. Our completed theme will have CSS and PHP (with HTML fragments). To ensure all of these files are loaded, we need to tell Drupal where to find them, by listing the files in the theme's .info file. To begin working with our theme's info file we'll start with the only values which are required: name, version of Drupal core this theme can be applied to. We'll also add a few recommended pieces of information: description of the theme, the template engine, and a screen shot for easier selection of the theme from the administrative area. By the end of this lesson, you will be able to create an info file for a theme, and explore the relevant drupal.org handbook pages for more information on refining your theme's info file.
Our main focus for the Domicile theme is restyling Drupal's markup with CSS. Although it is tempting to put all of your CSS into a single file, things can quickly grow out of control. In our theme we'll break our CSS into smaller stub files to make the theme easier to maintain using the file naming conventions for Drupal 8.By the end of this lesson you will be able to incorporate CSS files into your theme via the theme's .info file.
Additional resources
Drupal uses a series of nested template files to build out the rendered HTML pages we see in our browser. The template file page.tpl.php holds markup between <body> and </body> tags. We talked about the nested nature of template files in Lesson 3: Theming by Component.
In this lesson we will:
- create the file page.tpl.php
- add the relevant markup, and CSS classes for our grid framework
- insert relevant PHP variables so that Drupal can render each of its page components.
By the end of this lesson you will be able to create, or adapt, a page.tpl.php file to suit the conventions you identified in your style guide.
Designs often have a few elements which don't need to be easily edited and can essentially be "hard wired" into the template files. In our design there are three or four images which fall into this category. In this lesson we'll edit the page.tpl.php file to insert our design assets from Lesson 5: Extract Design Assets. By the end of this lesson you will know which variables can be used in a template file to ensure the correct directory is always used for hard-coded image files.
Technically a theme can be installed onto any Drupal site, but it never quite works this way in real life. In this lesson we'll create a playground so that we can try out our theme before deploying it to a live server. We'll start by installing Drupal and adding some “fake” content and menus with the devel generate module. For these tasks we'll use Drupal's default theme, Bartik. By the end of this lesson you will be able to install Drupal in an environment where a development version of the theme can be safely tested.
Additional resources
One of the most time consuming things a content editor can be forced to do is resize images before creating their content. Fortunately we can get Drupal to do the resizing for us. It's not perfect—it's just a plain resize, but it's enough for most basic sites. By the end of this lesson, you will be able to configure Drupal to resize images to your specification when they are uploaded using the image field type.
It's pretty typical for a site to have one or two pieces of content that need to be easily edited, but also aren't nodes. For example: text in the footer. There are a number of ways to create this content. We'll use blocks to create this content as this is the easiest way to place content into a specific region without additional helper module. By the end of this lesson you will be able to create custom blocks, and place them into specific regions within your Drupal theme.
A base theme is someone's idea of a really great starting point. It might include the stub files for CSS overrides, template files which bring Drupal core's markup up-to-date with HTML5, useful theme overrides which create new template variables. In other words: a base theme can provide you with a lot of really great stuff! The first version of the Domicile Theme used the NineSixty base theme—just enough for a simple site, but not so much overhead that it was complicated to learn. This version of the theme doesn't use a base theme. That's because, thanks to Sass, we'll be able to get almost all of the power of the NineSixty base theme through a gem plug-in. In this lesson you will learn which folders are typically used to keep Drupal themes neat and tidy.
This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.
To go from design to theme we worked through three major steps: building a style guide; building out Drupal; and finally applying the style guide to Drupal. In this lesson we'll review each of the steps outlined in this learning series:
- creating a style guide with base rules, layout rules, and component rules
- extracting design assets
- configuring Drupal
- creating theme files
- debugging components from within Drupal
By the end of this lesson you will be able to outline the process needed to transform a static design file into a functional Drupal theme.
Once all of the elements are in place, it's time to get down to the real work of theming the components. In this lesson we will:
- use our style guide and checklist to find each component
- check to see if the style looks "right"
- troubleshoot broken styles so that each component looks as good as the designer's original, static files
By the end of this lesson you will be able to identify elements on a rendered Drupal page which do not have the correct styles applied, determine the source of the problem, and alter the markup or styles to correct the output displayed in a browser.
Once your theme is uploaded you still need to enable it before it will be applied to your site. By the end of this lesson you will be able to enable new themes for your Drupal site.
It's always smart to do your development work in a local environment, but eventually you will need to upload your theme your server. In this lesson we'll upload our theme to our web server using Filezilla. By the end of this lesson you will know which folder your theme needs to be uploaded to, and at least one application suitable for uploading files.
Additional resources
The final step before we step back into Drupal is to create a checklist for all the things we need to implement in Drupal. Using our style guide as a starting point, we'll ensure that every design decision which has been made can be implemented in Drupal. Your checklist might also include notes about which modules should be used to build each of the components from within Drupal. Creating a checklist might seem like a trivial task, but it's really important that you know exactly what you're about to build so that you don't get overwhelmed once you step into Drupal. By the end of this lesson you should be able to create a document with all the instructions, and notes you will need to apply your style guide to a Drupal site.