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.
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.
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
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.
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.
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.
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.
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.
this lesson, we'll configure Webform content type defaults and add our first Webform node.
Additional resources
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.
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.
In this video we cover a new Drupal 7 feature which lets us create suggestions for theme functions, in addition to suggestions for templates. We'll use this to modify the tags displaying on a node in our site.
Notes:
In the example: $item['#options]['attributes'] += $variables['item_attributes_array'][$delta]; += is a shortcut for array_merge. So it is ensuring the contents of $variables['item_attributes_array'][$delta] are included in $item['#options]['attributes'] so that any class, rdf info or other html attributes are appropriate applied to the tag links. It's possible for any number of modules to set HTML attributes on the tags field in the theme we need to make sure that they get printed out appropriately.
Additional resources
This chapter gives an introduction to how you work with Drupal's renderable, form arrays by adding an image button to the search form. It also walks through the process of adding the necessary classes to a form element so that the image button is properly aligned. The Forms API reference document is a pretty essential reference document for creating and editing forms in Drupal.
Although we use the function dsm() in this video, this should probably be dpm() as that's the preferred function name. The functions dsm() and dpm() are identical.
Additional resources
You can use custom image sizes for automatic display in your Views!
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! Not only can we specify what the image will look like at the node-level, we can also specify what the image will look like in Views.
I am assuming that you already know how to create custom image style presets, and are familiar with the Views module.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled and that you have already downloaded and enabled the Views module along with its prerequisites.
We will use the example of a blog, where we add our scaled images to display in the listing.
Walks through the process of enabling the theme developer module and showing the themer info, which is like Firebug for Drupal theming. You can choose specific elements on the page to see what Drupal template files or theme functions were involved with outputting it to the screen. You can easily look at the candidate template names that are available, as well as see all of the variables that are available from that template file. A list of documented variables can be found within the node module's node.tpl.php file, but sometimes there are undocumented variables that are coming from contributed modules or elsewhere. It's a super handy tool to have available, but only enable it when you really need it since it can adversely affect the mark-up on your page and cause some wonky behavior.
Additional notes:
The Theme Developer module is on Drupal.org at http://drupal.org/project/devel_themer. Once you find a module on Drupal.org, you can see the "machine name" for the module in the URL (it is the same name as is used to for the module's .info file as well). That is the name that Drush uses. So, in this instance, Drush is looking for "devel_themer".
drush dl devel_themer
Additional resources
Shows how to create a theme template suggestion for a specific node type. In this chapter, we create a dynamic template for the article node type by copying the node.tpl.php into a node--article.tpl.php where the 'article' is the machine-readable name for the article content type. We add some specific styling to the node author submission information as well as the date. We also discuss how Drupal looks for the most specific template suggestion (i.e. the node id), then moves to more and more generalized template files like the content type, and then the node.tpl.php as the most general. The Drupal.org documentation page that we look at can be found at http://drupal.org/node/1089656.
Additional notes:
The field_tags variable relates to the corresponding tags field on the article content type. For every field you have on your node the $content variable will contain the rendered content of that node in a key that is the name of the field. So in this case $content['field_tags'] contains all of the tags applied to the node.
Additional resources
In this video Karen will show you how to create a date pop-up on your calendar, using the ColorBox jQuery plugin. She shows how to integrate the plugin with Drupal with the Colorbox module and then how to configure this with the Calendar module. Additional notes: The default display is to show the entity label. You will need to change this to show the complete entity otherwise you'll get a popup with no information in it.