Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Introduction to CTools Style Plugins

Video loading...

  • 0:00
  • 0:06
    Introduction to CTools Style Plugins with Amber Matz.
  • 0:17
    AMBER MATZ: When providing reusable components to be used by site
  • 0:20
    administrators you may also want to provide a set of reusable styles
  • 0:25
    that can be applied to the panel pane background or pane title.
  • 0:29
    Let's say your style guide calls for four different backgrounds
  • 0:33
    of callout boxes and three different heading styles,
  • 0:36
    including a default style for the heading and a no background style.
  • 0:41
    Wouldn't it be nice if a site editor could pick and choose
  • 0:44
    the combination of background and heading
  • 0:46
    style for any given panel pane?
  • 0:49
    And what if whatever combination they chose,
  • 0:51
    it would remain in line with the original vision of the style guide?
  • 0:56
    What if you could do all of this in the Panels interface
  • 0:59
    simply by selecting a radio button on the Settings Form
  • 1:02
    without having to bother the themer or a front end developer
  • 1:05
    to somehow try and target the styles of some random panel pane
  • 1:09
    on some random panelized page.
  • 1:12
    Such an administrative experience can
  • 1:13
    be made possible with CTools Style Plugins.
  • 1:17
    A CTools Style Plugin allows a developer
  • 1:20
    to provide a settings form and a template file that can be chosen
  • 1:23
    and configured by a site administrator
  • 1:25
    using the panels' style interface.
  • 1:28
    In this lesson, we'll walk through the panels' style interface.
  • 1:32
    We'll take a look at what's provided by default,
  • 1:35
    and we'll be introduced to our demo style plugin and the functionality
  • 1:39
    that it provides.
  • 1:41
    I'm on a content page choose content type has been panelized,
  • 1:44
    so naturally there are several different panels
  • 1:47
    that I've placed on this page.
  • 1:49
    I'm also using the panels in-place editor, which
  • 1:52
    I can access through the Customize This Page
  • 1:54
    and change Layout Options provided by these buttons
  • 1:58
    at the very bottom of the page.
  • 2:00
    So to access the style settings for individual panel panes
  • 2:03
    or the regions, I need to click on the Customize This Page button.
  • 2:08
    And I can access those style settings on a region
  • 2:12
    through clicking on the Region Style button, which is a paint brush
  • 2:16
    icon, or for a panel pane by clicking
  • 2:19
    on the brush icon in a particular panel pane.
  • 2:23
    So go ahead and click on this brush icon.
  • 2:26
    And you can see there are several different options available already
  • 2:30
    through Panels module, including the System Block,
  • 2:33
    No Markup At All, No Style, and Rounded Corners.
  • 2:37
    If I were to just click on Rounded Corners and click Next,
  • 2:40
    it's just a one-step process with no further configuration options.
  • 2:45
    If I click on this brush again, I can also select my Custom Pane
  • 2:48
    Styles, which I've implemented in a custom module, which demonstrates
  • 2:52
    that you could have a multi-step form as well.
  • 2:55
    I could select a Reverse Color Values and a Bold Heading Style.
  • 3:00
    And what this does is by selecting the Custom Pane Styles,
  • 3:03
    I've told Panels that I want to use the template file
  • 3:07
    provided by this particular plugin.
  • 3:10
    And by selecting the options here, what I'm saying
  • 3:13
    is take the value that I've selected and insert it
  • 3:17
    as a class name in my template file.
  • 3:20
    Then I have a style sheet provided by my theme
  • 3:23
    that implements these styles.
  • 3:26
    So I'll click Save, and now I have a panel pain using
  • 3:30
    a separate template file with separate markup
  • 3:32
    than the rest of the panel panes.
  • 3:34
    Go ahead and save this page.
  • 3:36
    You can also access style settings just in a traditional Panels
  • 3:40
    administrative interface without the in-place editor.
  • 3:44
    I'll head over to the home page, which
  • 3:45
    is not using the in-place editor.
  • 3:48
    And in the Contextual menu, I will edit the panel.
  • 3:52
    And to access the styles for a particular panel pane,
  • 3:57
    I can click the gear.
  • 3:58
    And then in this section here, Style, right now it says no style,
  • 4:03
    so I'll click Change.
  • 4:04
    And I can change this to use rounded corners or my Custom Pane Styles.
  • 4:10
    So I'll choose my Custom Pain Styles,
  • 4:12
    and I'll use the Patterned style as well as a Small Caps Heading Style,
  • 4:18
    and save this page.
  • 4:20
    I'll see if the update in preview works.
  • 4:24
    And it's not working particularly well because I have some styles
  • 4:27
    applied to the content in this particular panel pane.
  • 4:31
    This is why I like the in-place editor because it's just
  • 4:34
    a little quicker to be able to preview the styles.
  • 4:38
    So I'll go ahead and change this back to No Style,
  • 4:42
    and I'll try this Recent Comments block, which we'll
  • 4:45
    probably have a little better luck on.
  • 4:47
    So I'll change this to my Custom Pane Styles,
  • 4:51
    and I'll use the Reverse Color Values again
  • 4:53
    and the Bold Headings Style.
  • 4:56
    And I'll go ahead and update and save.
  • 4:58
    And now I have the style applied to my panel pane.
  • 5:03
    I really do prefer to use in the in-place editor
  • 5:06
    when I'm dealing with CTools Style Plugins.
  • 5:09
    It's just a little bit of an easier process to get to the preview.
  • 5:15
    So by implementing a c Style Plugin, I
  • 5:18
    was able to provide a discrete set of options
  • 5:21
    that an editor or a site administrator
  • 5:23
    could use to change the styles on a particular panel pane.
  • 5:28
    So these styles can be very much in line with your style guide,
  • 5:32
    and by providing that discrete set of options,
  • 5:35
    you're ensuring that whatever options they choose,
  • 5:39
    they will be within your particular brand's style and your site's theme
  • 5:44
    and style, and they're not going to necessarily go astray and select
  • 5:48
    an option that is going to look hideous on their site.
  • 5:53
    Another module that provides a c Style Plugin with many options
  • 5:58
    that will probably not be within a particular style guide
  • 6:03
    is the Stylizer module.
  • 6:05
    So if I go to modules and enables Stylizer are in the Chaos tools
  • 6:11
    Suite, I'll save the configuration to enable the module.
  • 6:15
    And I'll head back over to a node page.
  • 6:18
    I'll customize this page, and I'll click on the paintbrush icon here.
  • 6:24
    And custom style, this is provided by Stylizer.
  • 6:29
    If I click Next and then choose a basic style,
  • 6:32
    now I have this very elaborate form with a live preview
  • 6:36
    and it lets me choose the colors for the background
  • 6:39
    text, border, the font.
  • 6:43
    All of the options are available to you here.
  • 6:46
    Now this might seem like a really great thing,
  • 6:49
    but it's really going to not provide any constraints,
  • 6:53
    and it's not going to guarantee that the options
  • 6:56
    selected are within your style.
  • 6:58
    But if you want to provide just a free-for-all interface,
  • 7:02
    then Stylizer module might be the module for you.
  • 7:05
    And for more information about Stylizer module,
  • 7:08
    check out the Panel series, and there is a lesson there on Stylizer
  • 7:12
  • 7:12
    So in the case where you have a particular style guide,
  • 7:15
    you want to provide a discrete set of options,
  • 7:18
    you want to control the classes and you want to control the markup,
  • 7:22
    and you just want to provide certain options to your site
  • 7:26
    administrators, implementing a CTools Style plug-in can really
  • 7:30
    provide an excellent solution in that use case.
  • 7:33
    In the next lesson, we'll dive in how
  • 7:35
    to actually implement the module.
  • 7:37
    And in further lessons, we'll go through line by line
  • 7:41
    the code necessary to implement a plugin for CTools Tool Styles.
  • 7:46
    See you in the next lesson.

Introduction to CTools Style Plugins


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.

Log in or sign up to download companion files.
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."