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
This chapter goes through the minimum steps for registering a theme within Drupal by creating a .info file. It also shows the syntax for a theme to be able to add custom CSS to your site as we start to implement our example design.
Additional resources
Theming Basics for Drupal 7 will provide a solid foundation for translating designs into Drupal themes. You'll learn to work with .info and tpl.php template files, how to add CSS and JavaScript, how to work with the render system new in Drupal 7, how to override templates, create regions, and use the Theme Developer tool. You'll start with the original HTML, CSS and JavaScript template files that were provided by the designer so that you can follow along in translating the design into a Drupal 7 theme. The video explains Drupal's design vernacular, concepts, and special needs. We'll show you how to associate the proper CSS & Javascript files, add all of the necessary regions, and control the HTML output through page and node-specific templates. You'll learn about the best tools and strategies for controlling the look and feel of your Drupal website.
This series will cover the basics of Drupal theming while the more advanced theming topics of working with the template.php file will be covered in the Advanced Theming for Drupal 7 series. These videos pair with each other, and will finish the complete implementation of the 960 Robots theme used in both videos. You can download the theme we're building from Drupal.org: 960 Robots.
Examples in this video are based on Drupal 7 and its variants.
In this introduction video, we set the stage for the Theming Basics series. We give an overview of what Drupal theming is, the common files we will work with, and the overall steps involved. Then we start off by defining and taking a look at the .info file and HTML template (tpl.php) files. We talk about regions and theme features, introduce the render() function, and explain dynamic templates. While we are teaching Drupal 7 theming, we also make sure to point out the important differences between Drupal 6 and 7.
Additional resources
In this video we introduce the template.php file and create our first preprocess function. We explain what the preprocess hooks are and how to name the function properly, then we show a list of existing variables, and how to modify one of those existing variables.
Additional resources
Display Suite for Drupal 7
Course
This lesson covers all the updates/differences in the latest 2.x version versus other Drupal 7 releases. The new 2.x version of Display Suite is still in active development at the time that this video was published, but we want to make sure you know the changes that are coming when the new version is finally released. This video is very important to view if you are using Display Suite version 2 for the first time and have watched other videos in this series. It covers UI changes/updates as well as feature differences.
Additional resources
In this lesson we cover how all over the configurations we have learned using Display Suite are able to be exported to code. This video shows how to do this using CTool but can also be done with Features as well.
Additional resources
In this lesson we cover another "extra" of Display Suite, Views Displays. This basically allows you to take over a view template file and use Display Suite to layout your views.
Additional resources
In this lesson we cover several extra options provided by the included "Extras" module with display suite. We will show how turning on the Contextual Links extra makes it easier to edit a layout when viewing an entity that is using it. We also look at the Page Title extra that allows you to hide/show the title for a particular layout. Finally we discuss a very powerful feature that allows you to have an option of an end user to select between different view modes.
Additional resources
Region to Block
FreeIn this lesson we learn how you can take a display region and create a block out of it to be placed in Drupal core's block system.
Additional resources
In this lesson we cover using the search display portion of Display Suite. This allows you to have a custom layout for your search results as well as your user search results. Display Suite offers lots of functionality here that you just can't get with a core configuration of search.
Additional resources
Display Suite Fields
FreeIn this lesson we cover adding different type of custom fields to your layout using Display Suite. From adding a custom code field, blocks, to dynamic fields, each of these can be moved around your layout and replicated/modified across different display modes.
Additional resources
Omega is a Drupal base theme that provides you with a really nice responsive framework. Omega also provides a lot of configuration options that are accessed through the UI rather than code. So, you can adjust the display settings and know that the underlying framework will be intact.
In this series, we're going to be demonstrating the Omega module by converting an existing Drupal theme into an Omega sub-theme. We'll talk about the HTML and CSS that's involved, and how they work together. We'll be working with theme functions and looking at the Omega best practices around how to break out your theme functions, where to put those, and how to use them.
Additional resources
PHP for Themers
FreeBefore we dive into advanced theming we are going to review the basic PHP you will need to use. This is a short review of PHP, including topics like data structures (arrays and objects), conditionals and operators, loops, and functions.
Additional resources
In this series, we talk about template.php, the file where all your functions live. We’ll also discuss preprocess functions and overriding theming functions. You’ll learn how to create new variables and override existing ones using template.php. With these tools you can allow your theme to have complete control of outputted HTML.
In this video you’ll learn when to use a tpl.php file or your template.php file, and we’ll look at differences between them. We’ll also review the three main steps of theming.
Additional resources
In this lesson we cover how one can use view modes and display suite to allow multiple options of layouts for content display. This allows a user to have a different layout of the same content for different scenarios of the site. Combining this with views and you can start to see the power of display suite in action.
Additional resources
In this lesson we cover the basics of using Display Suite to modify the layout of a particular content type. We cover all the potential templates, adding classes to regions, and lots of configurations to set to taylor the layout to your needs. We also discuss how you can create your own template files and layouts for your own customizations.
Additional resources
Because Omega doesn't make assumptions about your layout, it comes with lots of options and plenty of regions to work with. This is great but also has some down falls espcially if you are converting an exisiting theme that just doesn't need as many regions and zones. Along with removing regions you may need to add some as well. In this lesson we will demonstrate:
- Adding a region
- Removing regions
- Placing content into these regions
- Cleaning up the .info file
Once this is complete, we now have our converted theme setup just as it was before when it comes to the grid system and some blocks in place to make sure the layout is looking good.
NOTE: Kyle initially sets a position, but not the weight, of the footer_bottom region in this video, and then you'll see that he catches the mistake, and fixes it to have a weight of 3.
Let’s talk about taking your image uploads and turning them into unique shapes with fabulous effects using the ImageCache Actions module.
We already know that being able to set a standard for image display creates consistency and a better user experience. Drupal comes with the ability to do basic image manipulation like resizing them. By downloading and enabling another module, ImageCache Actions, we can do fancy things to those images, making your display truly customized.
I am assuming that you already know how to create Image Style presets.
For this tutorial, you need to make sure the Image module that comes with Drupal Core and you also need to download and enable the ImageCache Actions module. This can be found at drupal.org/project/imagecache_actions.
It is very time consuming and error prone to repeat "click steps" among multiple sandboxes, development and production in order to get your new image styles to appear. In this video, I will show you how to write code that turns your "custom" image style into a "default" image style so that you can use source control to update all of your site environments.
I am assuming you already know how to create image styles in the administrative interface. Familiarity with basic module development is helpful, but if you follow the techniques and patterns I demonstrate, you will successfully export your image styles into a new custom module.