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; } } } }