Tech

How to change element's ID with Diazo?

A common scenario: on your website all subpages share a common header, but you want a different header on the front page. Let's say you differentiate between both header versions by their ID attribute and define two different sets of CSS rules for each version. When applying Diazo rules to a theme file, you therefore need to change header element's ID, depending on whether the first page or one of the subpages was requested. Here's a snippet from rules.xml, which does exactly that:

Peter Lamut December 13, 2012

<!-- change header's ID attribute -->
<prepend css:theme="#header-index">
    <xsl:attribute name="id">header-subpage</xsl:attribute>
</prepend>

ID of the header as defined in theme file (header-index) is changed to header-subpage after the rule above is applied. The rule basically says “Match #header-index element in theme file and use some inline XSL on it”. The “xsl:attribute” tag matches current element’s attribute whose name is “id” (with “current element” being the #header-index element as matched by the outer tag). The content of the “xsl:attribute” tag is a new value for the ID attribute. Nothing spectacular here indeed, but I lost quite some time trying to figure out how to do it in a simple yet efffective way. Very frustrating for such a small task. Various suggestions found on Google simply didn’t work or were a bit too complicated (there must be an easier way to do it, right?). So to help you avoid all the trouble, I decided to wrote this blog post. Too bad it didn’t exist before. ;)

Peter Lamut

Peter was one of the original co-founders of Niteo and the main developer on our early projects.

Menu

How to change element's ID with Diazo?

More from Tech

Dropping WordPress for Astro built by Claude Code

Designing your WordPress blog with a Tailwind CSS theme

Subdomain vs Subfolder: The SEO Debate Settled