One Drupal Themers Path for Defining a New Panel

My goal is to continue my work exploring the 960 grid system. I ‘mostly’ like the mark-up, and I really like the visual representation. The classes and id’s seem to fit my style. I have an awesome “Mothership” (morten), and developing some very cool subthemes for a client that will allow them some incredible flexibility and the ability to add new themes (colors, images, shapes) pretty quickly without losing the overall look and feel... Anyway…
My next evolution was to use 960.gs with panels. I love the flexibility and flow of panels so now I need to create my own panel with specific mark-up for 960.gs, and so that it will fit into my “Mothership”. At the time of this blog post I am using Panels 6.0-3-alpha4. My plan is to create a 3 panel layout that is large, medium, and small. For 960.gs using the 12 grid, I am creating a grid_5, grid_4, and grid_3. Here we go…

Finding Nemo (tpl files)

As a themer I feel very fortunate that merlinofchaos uses timplefifs (morten) almost as a philosophy. I found the files I wanted to work /panels/plugins/layouts This is my first go at this, so I didn’t want to fuss with the flexible layout, and I didn’t want to add or guess at any extra variables, so I decide to start with one of the three column layouts (threecol_25_50_25)

My First Path

I copied all of the files into a new folder called panelcool



I renamed the files.




Then I dug right into what I know best first… the tpl file, and here is where I make my mark-up changes, the new code looks like this.


<div class="container_12" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
  <div class="grid_5 alpha">
    <div class="inside"><?php print $content['left']; ?></div>
  </div>

  <div class="grid_4 alphaomega">
    <div class="inside"><?php print $content['middle']; ?></div>
  </div>

  <div class="grid_3 omega">
    <div class="inside"><?php print $content['right']; ?></div>
  </div>
  <div class="clear">&nbsp;</div>
</div>
<div class="clear">&nbsp;</div>


Now it’s time to suck it up and work with the function. The function can be found in the renamed file (panelcool.inc) here is the BEFORE and AFTER…

BEFORE

function panels_threecol_25_50_25_panels_layouts() {
  $items['threecol_25_50_25'] = array(
    'title' => t('Three column 25/50/25'),
    'icon' => 'threecol_25_50_25.png',
    'theme' => 'panels_threecol_25_50_25',
    'theme arguments' => array('id', 'content'),
    'panels' => array(
      'left' => t('Left side'),
      'middle' => t('Middle column'),
      'right' => t('Right side')
    ),
  );

  return $items;
}

AFTER

function panels_panelcool_panels_layouts() {
  $items['panelcool'] = array(
    'title' => t('Panel Cool'),
    'icon' => 'panelcool.png',
    'theme' => 'panelcool',
    'theme arguments' => array('id', 'content'),
    'panels' => array(
      'left' => t('Left side'),
      'middle' => t('Middle column'),
      'right' => t('Right side')
    ),
  );

  return $items;
}

Optional Stuff

I changed the png image so I could see the changes :)
I didn’t mess with the css for this because the 960.gs css is already in my theme, so the layout will be controlled by that file, but if you want to add the css file add 'css'=> 'panelcool.css', to the array $items['panelcool'] = array(, that will get it loading for you.


Head back to a panel layout screen and BAMO!




Next week we’ll make our new Panel into a module so we don’t hack Panels2 by leaving our directory in there… it’s in alpha after all, we don’t want to move and replace the file every time.