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
In this lesson, we will cover the basics of getting code into version control using the Mac app "Tower" and then making the first commit and pushing it to the remote repository we will setup on beanstalkapp.com.
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.
Features is a module which generates modules for us. You can then extend that module just as you would any other Drupal module. In this video we'll add some additional code to our feature to make it more complete for our needs, outside of the realm of what Features itself can provide.
The features module (and the drush command) are pretty smart about not overwriting custom changes, and your chances of overwriting your custom code are pretty slim. When features exports a module it creates a .module file with only one line of code in it. Which is an include for another file: mymodule.features.inc. Features then puts all of the automatically generated code into this included file. When you regenerate or update a feature it just uses the existing mymodule.module file which maintains any code that you wrote, and then regenerates the mymodule.features.inc and associated files.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
James Sansbury defines Features (a module that helps organize site components and applications for specific use cases), as distinct from Nodes and other forms of site content.
Prerequisites
This series assumes that you can install Drupal 7, create a basic content type, create a basic view, and use Drush. See the following resources if you need a refresher:
- Create a New Content Type
- Creating a New View
- Introduction to Drush series
- Installing Drupal with Drush
Additional resources
Features project (Drupal.org)
We'll create our very first feature and then see how it works by putting on our production site and enabling it.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
Hands-On: Generating Sample Content (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
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.
This chapter explains hook_page_alter(), which is another alter hook new to Drupal 7 and to the theme layer. Each page rendered by Drupal is contained within an array where the theme is able to go in and rearrange, delete or duplicate specific page elements.
Additional resources
This chapter shows some general best practices for keeping your template.php file clean as well as making it easier for designers to work primarily with the template files when possible to avoid them having to make too many changes to template.php. Specifically, some HTML classes are removed from the ninesixtyrobots_comment_form() function in template.php and moved to the comment-form.tpl.php template file, which is specified as an option in the ninesixtyrobots_theme() function. The rendering logic is also removed from the theme function and into a preprocess function so that it can be passed in as a variable to the new template file.
Additional resources
The ability of having alter hooks within the theme layer starts to blur the line between the logic and presentation, and so there are a few things to be aware of when using hook_form_alter() from the theme layer. The biggest thing to know is that the form rendering process has already gone through the creation and validation preparation process at the module layer, and so you shouldn't be drastically changing the functionality of a form at the theme layer. This form alter hook at the theme layer is primarily for aesthetic clean-up, styling and additional design. This chapter gives some specific examples of things to watch out for.
Additional resources
There are four alter hooks that are now available to the theme layer in Drupal 7. This chapter walks through two of those hooks, hook_css_alter() and hook_js_alter(). These hooks allow the theme layer to reorder, delete or replace specific CSS or JavaScript files that are being loaded by Drupal core or other contributed modules.
Additional resources
This lesson goes through the process of creating Theme Settings so that administrators of a theme are able to turn on and off specific features within the the theme, as well as specify other relevant settings.
Note: Twitter has recently shut down their v1 REST API so this lesson's site_slogan adjustment no longer works (it will always return no values because there is no API data found). The core concepts of how to create theme settings are still correct, you just won't be able to see the output from Twitter.
Additional resources
This chapter goes through the process of adding a specific form id to the theme registry with the hook_theme() function, which allows the creation of a new function that targets a specific form. Specifically in this chapter, comment_form is added to the theme registry so that we can create a ninesixtyrobots_comment_form() function in order to add a column to the comment form so that the name and subject fields are displayed side-by-side.
Additional resources
Provides an overview of what is covered in the Theming Basics series and gives a preview of what is yet to be covered within the Advanced Theming video.
Walks through the process of adding a screenshot to you theme so that it'll show up properly within the theme administration page, following the screenshot directions found on Drupal.org, and using the Skitch screenshot app (you can use whichever screenshot app you like).
Additional resources
Takes a tour through some of the more useful template variables, and more ways of determining the available variables by adding the following code to a page template:
Walks through the process of copying the default node.tpl.php file from the core node module into the theme, and then customizing the output specific to individual in order to match the design. See how to add specific variables, when to use conditional if statements and the best way to debug and iterate through this process.
Additional resources
In this chapter, we add some sidebar and footer regions to the page via the .info files, and printing those new regions out in our page template file, adding some blocks to help with testing. We also talk about Devel and Krumo, and how we can use those to find out everything that is available in out page array, using the dsm() function. While inspecting out page array, we point out the differences between elements and properties within renderable arrays.