Customize Panels Styles with CTools Style Plugins

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.