It's hard to find really good documentation on creating custom ctools style plugins, like the stylizer that comes bundled with panels. For example, if you search the web, you'll come up finding a link to http://dustinbons.com/panels-styles-plugin-drupal-7 which is not really a very good tutorial. If you view the advanced help module page on this, it comes up blank.
The best way to learn is to take a look at the code for the styles that panels gives. They are located in the panels module, panels/plugins/styles. Take a look at naked.inc first to get an idea of the simplest form of a style plugin. Next, take a look at the default style; you'll see that they add in the panel separator there. If you look at rounded_corners.inc, you'll see an example of how to include a settings form.
Here's an example plugin for changing the background color. It uses the same form for panels regions and panes.
sites/all/modules/examplemodule/plugins/styles/bgcolor/bgcolor.inc:
<?php /** * @file * Definition of the 'Background color' panel style. */ $plugin = array( 'title' => t('Background color'), 'description' => t('Presents the panes or panels with a background color.'), 'render region' => 'examplemodule_bgcolor_style_render_region', 'render pane' => 'examplemodule_bgcolor_style_render_pane', 'pane settings form' => 'examplemodule_bgcolor_style_settings_form', 'settings form' => 'examplemodule_bgcolor_style_settings_form', 'hook theme' => array( 'examplemodule_bgcolor' => array( 'variables' => array('content' => '', 'classes' => ''), 'path' => panels_get_path('plugins/styles/bgcolor', FALSE, 'examplemodule'), 'template' => 'bgcolor', ), ), ); /** * Render callback. * * @ingroup themeable */ function theme_examplemodule_bgcolor_style_render_region($variables) { $panes = $variables['panes']; $settings = $variables['settings']; $output = ''; $bgcolor = $settings['bgcolor']; foreach ($panes as $pane) { $output .= theme('examplemodule_bgcolor', array('content' => $pane, 'bgcolor_classes' => "bgcolor-$bgcolor")); } return $output; } /** * Render callback for a single pane. */ function theme_examplemodule_bgcolor_style_render_pane($variables) { $content = $variables['content']; if (empty($content->content)) { return; } $pane = $variables['pane']; $display = $variables['display']; $settings = $variables['settings']; $bgcolor = $settings['bgcolor']; $output_std = theme('panels_pane', array('content' => $content, 'pane' => $pane, 'display' => $display)); $output = theme('examplemodule_bgcolor', array('content' => $output_std, 'bgcolor_classes' => "bgcolor-$bgcolor")); return $output; } /** * Settings form callback. */ function examplemodule_bgcolor_style_settings_form($style_settings) { $form['bgcolor'] = array( '#type' => 'select', '#title' => t('Background Color'), '#options' => array( 'white' => t('White'), 'blue' => t('Blue'), 'grey' => t('Grey'), 'black' => t('Black'), 'purple' => t('Purple'), ), '#default_value' => (isset($style_settings['bgcolor'])) ? $style_settings['bgcolor'] : 'white', '#description' => t('Choose a background color.'), ); return $form; }
<div class="<?php print $bgcolor_classes; ?>"> <?php print $content; ?> </div>
.bgcolor-white { background-color: #fff; } .bgcolor-blue { background-color: #005eb8; } .bgcolor-grey { background-color: #e1e2e5; } .bgcolor-black { background-color: #000; } .bgcolor-purple { background-color: #762575; }
Here's an article that shows how to reuse some code to be included in many styles... Disclaimer: it's a little confusing and I've never done this :)
Panels Style Plugins: Use ‘get children’ to provide substyles, Nov 3 2013 (Useful if you are going to have many styles that will all share some code): http://drupalnotes.com/post/65884403176/panels-style-plugins-use-get-children-to-provide