I'm using a diazo (currently plone.app.theming 1.0b1-r48205) with Plone 4.1. I want to use exactly Plone's html for the search widget except that I'd like to replace <input> element used for the search button in the search widget with a <button>. The diazo docs seem to suggest you can do this.
In my theme html file I have an empty <div id="portal-searchbox"></div>. In my rules.xml I have the following:
<rules if-content="$enabled">
<replace css:theme="div#portal-searchbox">
<xsl:apply-templates css:select="div#portal-searchbox" />
</replace>
<xsl:template css:match="div#portal-searchbox input.searchButton">
<button type="submit"><img src="images/search.png" alt="Search" /></button>
</xsl:template>
</rules>
I've tried numerous variations of this but with no success. Any help would be much appreciated.
Ok, so the following works. The reason it wasn't working before was that the <xsl:template> was not in the root level rules tag (there's a documentation bug there). The <xsl:template> must be in the root level rules tag because there is no way to apply rule conditions to an <xsl:template> currently.
<xsl:template css:match="div#portal-searchbox input.searchButton">
<button type="submit"><img src="images/search.png" alt="Search" /></button>
</xsl:template>
<replace css:theme="div#portal-searchbox" css:content="div#portal-searchbox"/>
Update: I've added support for <replace content="..."> to Diazo, so inline <xsl:template>'s are considered deprecated. Instead use:
<replace css:content="div#portal-searchbox input.searchButton">
<button type="submit"><img src="images/search.png" alt="Search" /></button>
</replace>
<replace css:theme="div#portal-searchbox" css:content="div#portal-searchbox"/>
Documentation at http://diazo.org/advanced.html#modifying-the-content-on-the-fly