This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
When building websites with Panels, re-usable components are placed as panel panes in layout regions. Both the panel panes and the regions have a separate template file and are themeable. These styles are also accessible via both the Panels Administrative UI and Panels In-Place Editor by accessing "Styles" in the pane or region contextual menu. Some styles are provided through the Panels module already, "Rounded corners," for example. The Stylizer module, when enabled, adds to this list of styles by providing an extensive settings form allowing you to update the fonts, sizes, borders, and colors of the panel pane content, background, and headings. It is possible to add to this list of styles and provide your own custom settings form and applied pane styles by creating a CTools Style Plugin.
A CTools Style Plugin consists of a php file and template file(s) enclosed in a module that provides a hook notifying the CTools API to look for plugins in this module. The php file provides a $plugin array, informing CTools about the plugin, theme functions for the pane and the region, and function defining a settings form. The template files, one for the pane and one for the region, print out values from the settings form and the pane or region object, such as its title and contents.
A person familiar with php, HTML, CSS and the basics of module development in Drupal can create the module and plugin allowing herself or another person, such as a site administrator, to both place a panel pane and change its heading or background style (or whatever styles were defined in the plugin), using simply a settings form in the Panels UI.
Providing site administrators and page builders with a straightforward way to apply styles to a panel pane background or its title via a settings form can help ensure that style guidelines are met and applied appropriately. By providing a settings form with a limited set of reusable styles, a component-based approach to site building is made possible and maintainable by the site administrators.
In this series, we'll walk through a demo CTools Style Plugin, examining each feature. By the end of this series, you will have a working demonstration in code that you can take and customize for your own custom implementation.
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."
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."
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."
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."
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."
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."