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
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.
Additional resources
This video walks through the process of replacing static content in the page.tpl.php file with dynamic variables. Joe talks about the html.tpl.php file as well as pointing some of the important variables that should be included within the theme.
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
This chapter covers some really handy browser extensions in the process of theming. For Firefox, there's the Web Developer Toolbar for turning off and on JavaScript, resizing the browser window to different sizes, and inspecting elements. It also has the capability to test changes to CSS files in a format that is easy to copy and paste into the source file. We also show off the basics of the popular Firebug extension, and the equivalent functionality that is now built in to webkit-based browsers such as Safari and Chrome.
Additional resources
This video goes through some of the strategies for translating a design into a Drupal theme. We talk about the two approaches of adding the HTML to an existing Drupal theme template vs. inserting dynamic variables into the HTML provided by our designer. Throughout this video, we're going to be assuming that our designer has delivered the full HTML, CSS and JavaScript to us, and we'll be adding in the dynamic variables. In this process we start to look at the design and start to break it up into it's component Drupal parts and start to strategize for how to build out the site and implement the design..
Additional resources
This video walks through the new interface in Drupal 7 for enabling themes, setting them to be the default, and configuring the administration theme. It also walks through the process of downloading a contributed theme, and where to store it. Finally, it walks through the theme settings pages that provide a user interface for turning on and off specific options for a theme.
Additional resources
Theming Basics for Drupal 7
CourseTheming 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 chapter, we'll walk through some of the best practices for filling out a stock Drupal site so that you can start to have some dummy content generated by different users and tagged with different taxonomy tags. We'll step through creating content with the devel generate module, and then do some other site preparation tasks such as creating some menu items and adding a shortcut link to the performance page so that you can quickly access the clear cache button.
Additional resources
Goes through the process of creating a view of something other than content. In this case it's a view of users, and this chapter talks about other types of views of entities that are possible from different base tables.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
Goes through the process of attaching a views display to an existing view. In most cases this is done when the two views are closely related, but are displaying or highlighting different information. In this case, we'll set up a full teaser view of the latest job posting and display that at the top of the table, and we'll also create an offset on the original view so as to not show duplicate content on the attached view.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
Goes through the process of creating dynamic views with contextual filters by taking the content ID (i.e. the node it) from the URL and inserting that value as an argument for the views query. In the end, we're able to create a tab that shows all of the job applications for a particular job and have that view show up on the related job posting node.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
We've already used some filters in our views, but now we'll look at how to do a few fancy things with filters. We'll expose some filters to let our end users choose the filtering they would like to apply, and we'll see how you can decide whether all of the filters are required by using the AND and OR operators.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
Views is great for making listings of all kinds of content for many different tasks and users. You don't always want everyone on your site to see everything you put in a view though. In this video we'll learn how to limit access to a particular view, using the built-in menu and access restriction settings. We create a new view to list all of the applications that have been received on the site and make sure that only site staff can access it.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
In this video we look at what Views displays are, the different ones available out of the box, and how to add some block displays to our Job openings view.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
Views relationships let you add related information to your view. Here is how you can take advantage of various references, like node and user references, or file information. We'll be using relationships to add some contact details to our Job openings view.
Additional notes:
If you don't see the field "fields" under the dropdown menu when creating a Relationship for the contact person's phone number it's possible you don't have the Views module enabled. (Or perhaps you've missed enabling the Views UI module...make sure you have both). Then complete the following steps:
- Create and SAVE your view-relationship.
- Create a user reference where you want to reference the user.
- Now when you create the user reference it will have an option to reference your view.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.
We'll look at making a nice, sortable table by switching from grid to table style, and using individual fields instead of teasers in the Job openings view we set up in the last video.
This video series will continue the Job Board example from the Fields for Site Builders series where we will discover ways to display all of the job postings, allow people to find the one they are looking for and easily apply for it.