Changing the HTML produced by Panels: Is it possible?

Question

I like to use panels, however panels is a pain in the butt to style because of the massive amount of div's it generates. Also the classes it applies to those divs make no sense and are way too bulky as well. Causing confusion among my fellow front-enders.

To show you the output they generate:

The problem is that i'm using 960.gs and panels adds their own classes and bulky div structure, making me have to override their classes. This is something i don't want to do, i want to clean up the divs. Is there any way to do this?

Edit:

What i did to clean up some div's that i considered useless:

Starting from line #388 in flexible.inc (panels/plugins/layouts/flexible)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

I actually made a copy of the flexible layout and edited that one, but if i had more time on this project, i would create a cleaner plugin for this.

Note: This isn't the best solution, this was the fastest possible route to accomplish my goal. Creating you're own small plugin is the best way to go, you can always use one of the existing plugins as a base.

Answer 1

I've looked into this issue before. Here's the issue you want to read. It seems nuts at first, but there are actually good reasons for it being like this.

Bottom line: think of Panels Flexible Layouts as a prototyping tool. Use it to try out and draft ideas in development, staging, user-testing etc, then when you've got the perfect layout signed off, implement it for production with clean, crisp, hand-optimised HTML as a custom Panels layout (more on those below).

Here's a quick summary of why it is the way it is, based on that issue I linked to:

• Panels' HTML output needs all that crazy markup to be able to accommodate the craziest flexible layouts anyone could want to create - think loads of nested fluid and fixed regions side by side.
• Nothing automatically generated will be good enough for HTML purists, so the Panels guys haven't tried to keep them happy within the flexible layouts feature. So there's no HTML optimiser algorithm that tries to pare down the HTML generated by your layout to the bare minimum, because no matter how good it was, it still wouldn't be best-standards HTML.
• Something they don't mention: if there was such an optimiser, certain changes to the layout would cause now-redundant divs and classes to disappear. If you hung CSS off these, you'd need to re-write your CSS most times you make a small change to a Panels flexible layout. This means that if they tried (and failed) to make Panels Flexible Layouts into a best-standards production tool, they would also have weakened it as a prototyping tool.
• You can get clean, lean Panels HTML output. The expected workflow, reading between the lines, is I believe something like this:
  • You use Panels Flexible Layouts during early development, while trying out ideas.
  • Once you have settled on a particular layout, if you want clean HTML, you implement it using a custom layout, using only the precise amount of HTML markup that layout needs with just the right classes, semantics etc for your site (how-to below).

While I didn't like it at first, on reflection I think it makes sense. Rather than trying to do the impossible and create one tool that is perfect for both prototyping and for best-standards in a production context - which both have very different needs and could only result in a comprimise that wasn't quite right for either - they've gone with one tool that is ideal for prototyping and another seperate tool (custom layouts) that is ideal for lean production.

This means you can get the best of both, at the cost of a little bit more work implimenting your final layout as a template based on best-standards HTML - but a HTML purist will want to do that little bit of extra work anyway to get their output perfect.

---

How to create custom panels layouts? There's a detailed guide in the documentation on how to do so. Here's a quick basic summary:

1. Copy an existing layout from /sites/all/modules/panels/plugins/layouts to become /sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
2. Rename the files in the new copy to match their new folder name. Note that the .tpl.php file should have hyphens instead of underscores.
3. Add a line to the theme info file: plugins[panels][layouts] = layouts This tells Panels that you have custom layouts in this theme, and where they are (replace the string layouts if it's not the path from your theme to your custom layouts folder)

4. Edit the files with your perfect, sleek, minimal, semantic best-standards HTML and CSS.

   • Don't forget to also update the .inc file with info about your layout like name, categories, filenames, etc.
   • theme in the .inc file should match the .tpl.php file's filename, without the extension. Any underscores you enter here in the theme value will be converted to hyphens.
   • Also consider editing the .png icon to better reflect your actual layout.
5. Clear the cache. Your new layout appears as an option in Panels with the name, category, etc you specified in the .inc file. Use it.

Answer 2

You might also consider the Clean Markup Drupal 7 module for controlling markup output for Panels.

I searched this page in the browser and did not find a mention of it already, including in the really good comprehensive answer given by user568458.