New Tutorials: CTools Style Plugins: Create Your Own Panels Style Settings UI

It's release day and today we're releasing my short series of six videos on CTools Style Plugins. CTools Style Plugins enable you, as a module developer, to provide an interface (i.e. a settings form) that site editors can use to change the style of a panel pane. This allows you to specify a template file that should be used for that particular panel pane. The template file uses values selected in the settings form to print out a custom CSS class. Those style declarations are then added to your theme's stylesheet to ensure that the styles actually get applied to the pane.

CTools Style Plugins are super useful in cases where you have styles that you want to apply to panel pane content or headings. In this demonstration, I have a set of pane background styles and a set of pane heading styles that can be mixed and matched to create variations of panel pane styles that stay within the bounds of the site style guide.

A demo module and plugin are provided for you to download so that you can walk through the code with me in each lesson. This series is suitable for module developers of all experience levels, even if you're just starting out in module development. You'll implement theme() functions, a settings form using the Form API, print out variables in a template file, and navigate arrays of doom.

This series is broken up in to six lessons that build off each other and result in a working CTools Style Plugin that affects panel pane styles:

If you've ever wondered how to implement a CTools Style Plugin, this series will get you there.

Comments

I've just tested the files and download and I've updated the database export to reflect a couple of small changes I made. I turned on the Panels IPE (In-Place Editor) for the panels on the home page and I've updated the username and password to "admin", "admin". Now if you click "Customize this page" on the bottom of the home page, then the paintbrush icon ("Style"), you can select "Custom Pane Styles" and the settings form that we create in this series. The new database filename is ctools-styles.sql__0.zip and you can find it in the Downloads section of each video. Hopefully that will clarify things a bit.

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more