In this lesson, I provide a recap of the Panels-related tutorials in this series.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Customize Panels Styles with CTools Style Plugins — Drupalize.Me
As discussed in the previous tutorial, one thing that affects markup in Drupal when using the Panels module is the Panels layout. In this tutorial, I will provide an overview of how layouts work in Panels. To learn more about how to create your own Panels layout in code, see the related tutorial: Adding Custom Panels Layouts in Your Theme. To learn how to use the Flexible Layout Builder in Panels, see this tutorial: Custom Panels Layouts.
Additional resources
Adding Custom Panels Layouts in Your Theme — Drupalize.Me
Custom Panels Layouts — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.
In the tutorials that follow, you will learn:
- About Panels layouts
- How to add CSS classes using Panels
- How to override the panel pane template file
- What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive
Additional resources
Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me
In this tutorial, we'll take a brief look at what Panels means by "Style" as applied to a region or panel, and I'll walk you through the settings form and how to change a style for a panel pane using the Panels administrative console.
For a more in-depth look at Panels Style Plugins, including how to create your own, check out these related tutorials:
Additional resources
Customize Panels Styles with CTools Style Plugins
Styling Panel Panes with Stylizer
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, I will show you how to add and remove CSS classes from the body tag using Panels. I will also point out the other CSS-related settings and the pros and cons of each one.
Additional resources
Building Websites in Drupal 7 using Panels — Drupalize.Me
Chaos Tools Suite (CTools) — Drupal.org
Panels — Drupal.org
In this tutorial, I will demonstrate how to add a wrapper div and a class around, and just outside, the Panels layout markup, 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
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
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
This tutorial looks at the steps that Drupal goes through to obtain a render array for an incoming HTTP request, transform the render array into HTML, and then return it to your browser. We provide an outline of the process and links to resources for more in-depth information. We also take a more thorough look at the HtmlRenderer which converts a render array into HTML. Knowing how the render arrays you write in your code are ultimately used can help you optimize Drupal's Render API to describe your module's content.
Before you can migrate your Drupal 7 site to the latest version of Drupal you'll need to be able to build the features that make up the current site. Part of this is evaluating all the modules you've got installed, figuring out what you're using them for, and if there's a version that's compatible with the latest version of Drupal along with a migration path.
I usually make a spreadsheet for this. But any list of the modules you’re currently using that allows you to keep track of how you plan to update them will work. You also want to keep track of where you are in the process of figuring that all out. Because it’s likely you’ll have some modules for which the path is clear, and others where it’s pretty murky and requires more in-depth research to find a path forward. Having a list means you can break that up into tasks, and ensure you’re not missing something. It'll also help you define when your migration is done as well as any final quality assurance (QA) tasks.
In this tutorial we'll:
- Start a list of the modules that make up our current site.
- Point to some tools that can help speed up the process of evaluating a module's readiness.
- Provide a set of questions that you can ask about each module you're using as part of your planning process.
By the end of this tutorial you should have a list of all the modules you're currently using, and some tools you can use to help you figure out how to move forward with each one.
Before you begin a Drupal 6 or 7 (source) to Drupal 9 or 10 (destination) migration there are a number of things you should consider. Taking the time to plan your migration will help to ensure that you're successful. In this tutorial we'll take a high-level look at:
- Evaluating your existing Drupal 6/7 site for migration feasibility
- Preparing your source Drupal 6/7 site for a migration
- Preparing the destination Drupal site you're migrating to
By the end of this tutorial you should be ready to start assessing the feasibility of performing a successful migration, and begin making a migration plan.
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."
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."