Quick Dexterity 2-Column-Edit-Form with Diazo

With Diazo Theming you have the power to do nice things like, converting one-column edit form into two-column edit form.

In the following we will separate the odd from the even fields into two div container.

Diazo rules and inline-XSLT to separate even from odd fields

In the main rules.xml file, we define a conditional include of our content type rules file my-contenttype.xml:

<rules css:if-content=".template-edit.portaltype-my-contenttype">
  <xi:include href="my-contenttype.xml" />
</rules>

Then we define our rules to do the real work:

<?xml version="1.0" encoding="UTF-8"?>
<rules xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xi="http://www.w3.org/2001/XInclude"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <replace css:content="#content-core fieldset">
    <xsl:for-each select=".">
    <fieldset>
      <xsl:copy-of select="@*" />
      <xsl:copy-of css:select="> legend" />

      <div class="left-content-column">
      <xsl:for-each css:select="> div.field:nth-child(even)">
        <xsl:copy-of select="." />
      </xsl:for-each>
      </div>

      <div class="right-content-column">
      <xsl:for-each css:select="> div.field:nth-child(odd)">
        <xsl:copy-of select="." />
      </xsl:for-each>
      </div>

  </fieldset>
  </xsl:for-each>
</replace>
</rules>

CSS to show the two div container in two columns

body.template-edit.portaltype-my-contenttype{
  .left-content-column{
    width: 50%;
    float:left;
    .field{
      padding: 0.5em;
      &:nth-child(even){
        background: lightgray;
      }
    }
  }
  .right-content-column{
    width: 50%;
    float:left;
    .field{
      padding: 0.5em;
      &:nth-child(even){
        background: lightgray;
      }
    }
  }
}