Navigation
You are here: Home Things we build Code snippets Adding classes to a PloneFormGen form for Bootstrap styling

Adding classes to a PloneFormGen form for Bootstrap styling

Posted by Karel Calitz |

If you're using Plone, you're probably using PloneFormGen for your forms. Bootstrap's form styling is simple and pretty. Here's a simple way to make the two work together.

View our implementation of the solution here.

You can get PloneFormGen here.

The Problem

PloneFormGen's structure is similar enough to what we need for the Bootstrap styling to work, but the classes are not right. We need to add more classes to specific classes so that the styling activates.

You can get more info on specific classes that are needed here. I've only used a few for the sites we've built.

The Solution

Each line identifies an existing class and adds another class to that item. The new class activates the styling we need.

<!-- Main form wrapper -->
<xsl:template match="div/@class[contains(., 'field')]"><xsl:attribute name="class"><xsl:value-of select="." /> form-group</xsl:attribute></xsl:template>

<!-- Types of inputs specified by their classes -->
<xsl:template match="input/@class[contains(., 'firstToFocus')]"><xsl:attribute name="class"><xsl:value-of select="." /> form-control</xsl:attribute></xsl:template>
<xsl:template match="textarea/@class[contains(., 'firstToFocus')]"><xsl:attribute name="class"><xsl:value-of select="." /> form-control</xsl:attribute></xsl:template>
<xsl:template match="input/@class[contains(., 'context')]"><xsl:attribute name="class"><xsl:value-of select="." /> btn</xsl:attribute></xsl:template>

<!-- Error messages -->
<xsl:template match="div/@class[contains(., 'error')]"><xsl:attribute name="class"><xsl:value-of select="." /> has-error</xsl:attribute></xsl:template>

<!-- Specific classes that need to be targetted -->
<xsl:template match="select/@id[contains(., 'where-are-you-from')]"><xsl:attribute name="class"><xsl:value-of select="." /> form-control</xsl:attribute></xsl:template>
<xsl:template match="select/@id[contains(., 'region')]"><xsl:attribute name="class"><xsl:value-of select="." /> form-control</xsl:attribute></xsl:template>

You can either include this in your main rules file, or you can create an external rules file (as per our previous tutorial).

Mar 11, 2016 09:41 AM
Find out how Juizi can help your business