You are here

Creating custom pane styles in Drupal 6

Directory structure

Within your theme create a directory for your pane styles, I am just using a directory called styles.

This directory will store all the custom pane styles that we create which will be made available when selecting a custom pane style.

Theme .info file

You need to let Panels know that your theme is providing additional styles within your themes .info file, so add the following:

plugins[panels][styles] = styles

Where the last bit is the directory your styles sit in relative to the base of your theme.

So if you put your styles directory within another directory called panels (i.e. /my_theme/panels/styles) then in your info file you should have:

plugins[panels][styles] = panels/styles

You will need to the visit the themes listing page (/admin/build/themes/select) to get Drupal to refresh it's theme cache.

Base code

To start off with, we will copy some basic code from the panels module.

Navigate to your Panels directory then to the plugins/styles subdirectory. In here you will recognise a few of the file names matching the pane styles. We will focus on the block.inc file (default.inc is a region style, not a pane style).

Copy the block.inc file to your styles directory in your theme and give it a unique filename for your style.

I will just use custom.inc.

Modifying the code

The first thing we need to do is wrap the $plugin array in to a function.

<?php$plugin = array('title' => t('System block'),'description' => t('Display the pane as a system block; this is more restrictive than the default.'),'render pane' => 'panels_block_style_render_pane','weight' => -10,);?>

// If using per pane classes, $block->css_class will need to be added in your // preprocess or template, along with any other Panels specific field you // might want to utilize.return theme('block', $content);}?>

At the end change theme('block', $content) to theme('panels_custom_block', $content).

If you haven't already, set one of your panes to use the new pane style and view the page. You should hopefully see the changes to your pane.

Adding a settings form

Adding a settings form is very simple and uses the form API which makes it extremely easy for anyone used to developing in Drupal.

All we need to do is add an extra line defining our settings form function name:

<?phpfunction tester_custom_style_form($settings) {$form['display_random_text'] = array('#type' => 'checkbox','#title' => t('Display a bit of random text at the top of the block'),'#default_value' => (isset($settings['display_random_text'])) ? $settings['display_random_text'] : '','#description' => t('Checking this box will display a random bit of text at the very top of our block.'), ); return $form;}?>

We don't need to define a submit button as this is handled for us.

In your theme_my_theme_custom_style_render_pane() function you can access the saved settings through $pane->style['settings'] as an array of items.

So before the theme() function is called add some code to add any variables you need to the $content object.

And that is it. You now have a fully customisable pane style which you can give users full control of. The good thing with this is you can add set CSS classes by using a form select or checkboxes rather than relying on users remembering to set the CSS classes through the default pane settings screen which I have done below by providing all the different potential options that can be used for pane classes in an easy to use form.