In this exercise you will demonstrate knowledge of Panels, and create a layout for the Top Ten List page, and create and configure content within Panel Panes.
In this tutorial, I'll walk you through how to add a CSS class or ID to a panel pane using the Panels administrative console.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
Panelizer is a powerful module that allows you to attach panels to any entity and view mode in Drupal. You can create default templates for all content in a content type, for example, or you can create one-off pages with unique layouts and content panes.
In this lesson...
- Walk through Panelizer admin UI
- Panelize Article content
- Set up default Panelizer template
- Override versus Update Default Template
By the end of this lesson, you should be able to configure Panelizer settings, enable Panelizer for a content type, and understand the benefits and limitations of creating one-off pages that override the default template versus updating the default template.
Enabling the Panels In-Place Editor is recommended for this lesson.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
A CTools Style Plugin allows a developer to provide a settings form and a template file that can be chosen and configured by a site administrator using the Panels "Style" interface.
In this lesson, we will:
- Explore Panels' Style Interface
- Identify Default Panels Styles
- Introduce Demo Style Plugin
By the end of this lesson, you will understand how to access Styles in Panels and why you might want to create your own custom Styles interface for your site's editors to use.
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
The panel pane template file controls the markup for the panel pane container. When you place content into a panel region, it is wrapped by a container called the panel pane. To change this wrapper markup, you will need to copy the panels pane template file into your theme’s templates directory. Let’s walk through this process in this tutorial.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
Drupal would like to assume that every page on your website will use the same layout. As it turns out, this is often not the case. The home page of your site, in particular, regularly uses a different layout. In this lesson we will demonstrate how you can use Panels to build a unique home page layout for your site.
Additional resources
Views Content Panes is a module that comes packaged with Panels. It provides a new type of Views display called a Content Pane that enables you to pass off Views configuration to the Panel Pane.
In this lesson, we will:
- Enable Views Content Panes module
- Build a View using Content Pane display
- Explore Pane Configuration in Views
By the end of this lesson, you will have a better idea of why you will want to use content panes in Views whenever you are placing Views in Panels.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Stylizer enables site editors to change the styles of panel pane backgrounds, content, text styles, borders, and heading styles. It provides an extensive settings form, including a live preview and integration with the Color module, for point-and-click color picking.
In this lesson, we will:
- Identify style options provided by Panels
- Enable Stylizer module
- Change Styles of a Panel Pane and Heading using Stylizer
By the end of this lesson you should have a good idea of whether or not you want to enable Stylizer on your Panels-based site and if you do, how to access and use it.
Stylizer module comes packaged with CTools.
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
In this tutorial, we'll finish setting up the Test page using Page Manager. We'll enable Views Content Panes, create a new content pane display in our view of recent articles, and place that content pane in the panel page.
Additional resources
Overview of Views Content Panes — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this chapter, Joe Shindelar goes over all the necessary modules needed to get organic groups up and running. He also discusses that there are two methods using two different modules for viewing group information and content.
Additional resources
Panels and the Page manager module allow you to create different versions of the same page (called variants) under different circumstances. In this lesson you will learn how to build two different versions of the content on your home page. People who are logged in to your site will see a different home page than people who are not.
In a Views Content Pane display, it's possible to use exposed or contextual filters as panel pane configuration. We'll walk through this process and why you might want to utilize this feature of content panes.
In this lesson...
- Add an exposed filter to a view
- Use the exposed filter as panel pane configuration
- Place the same view twice with different configuration
Demo site log in:
- Navigate to /user
- Login with admin/admin
Additional resources
Legacy Theme Development
Guide
Now we have all the code in place for both our custom module and our style plugin. It's time to put it all together into our pane template file.
In this lesson...
- Connect values from settings form to template file
- Utilize values from pane object
- Utilize values from submitted settings form
All the code for the module and plugin is contained in the Resources section of this lesson. It's now your turn to create your own CTools Style Plugin!
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
This screencast covers the following topics:
- Manual import/export of Page manager settings.
- Import/export using Features.
- Some words about the custom rulesets module.
- Some words about the custom content panes module.
- Some words about the stylizer module.
- Some words (but not enough!) about mini panels.
- Some words about Panels everywhere.
- Some words and a quick demonstration of Panels in-place editor.
The selling point of a CTools Style Plugin is the settings form. By providing a settings form to the site editor who can then change the style of the page using a pre-approved set of styles, you can both empower and provide appropriate constraints.
In this lesson, we will:
- Use the Form API
- Build a Styles Settings Form
By the end of this lesson, you should be able to build a settings form for your CTools Style Plugin.
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
The sole purpose of our custom module is to implement a hook that will tell the CTools API that we have a plugin. Next, in our plugin's ".inc" file, we'll walk through the extensive $plugin array, understanding how the keys and values of this array correspond to functions and parameters inside the plugin.
In this lesson, we will:
- Hook into CTools inside custom module
- Explore
$pluginarray
By the end of this lesson, you should be able to implement the correct hook for CTools and understand how to customize your own $plugin array.
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
Before we dive into the code of the module and plugins, let's set up the files and directories in a meaningful structure that's both scalable and one that will ensure that our plugin is disoverable by the CTools API.
In this lesson, we will:
- Create module files and directories
- Create plugin files and directories
By the end of this lesson, you will have all of the files created with a proper structure, ready for editing.
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
In order to print out the pane title and settings form values as class names in our pane template file, we need to thread the pane object and settings array through a theme function so that they will be available to print out in our pane's template file.
In this lesson, we will:
- Walk through the pane theme function
By the end of this lesson, you should be able to implement a theme function for a panel pane.
Additional resources
The code for this plugin and module is located in sites/all/modules/demo_panestyles. See Companion Files to download the Files export, which also contains a demo site for Lessons 8-19 of Building Websites in Drupal 7 with Panels. Log in at /user with username "admin" and password "admin."
In this exercise you will combine knowledge of Panels and Views to create a complex page layout.