Theming the Content Taxonomy Module

Like many CCK enthusiast, I immediately create a content field for every taxonomy I create using the Content Taxonomy module.  It gives me some flexibility in terms of form layout (if I don't want all taxnonomies grouped), control over the order of fields during registration (using a straight taxonomy field usually requires some hook_form_later massaging) and the ability to use a branch of the taxonomy as a select list -- all good stuff.

But have you ever tried to theme it?

I had the need to create content taxonomy field that looked like this:



The taxonony is Topics of Interest and the top tier terms are Diagnosis and Term 1.  And you can guess which ones are the tier 2 terms.  Out of the box, Content Taxonomy will show me all the terms vertically and all with checkboxes.  Sure I can prepend a dash to every term recursively, but that wasn't going to cut it.

I always want the editor to select the bottom-most term and this taxonomy structure only has 2 levels.  Yes, I could have used the Hierarchical Select module, but that was a bit too heavy on the jQuery UX) and the CCK version isn't quite ready yet), I wanted something simple and understated.

OK, all I need to is hide the checkbox for tier 1 and make that text bold.  As for tier 2, those terms need to float left.  Piece of cake – not so fast.

Content Taxonomy supplies a wrapper with a class that allows you to access a specific term through CSS, but it gives you no relational structure – no nested DIVs or ULs.  And yes, Taxonomy Super Select gives me all these joys, but not CCK integration.

I first tired hook_form_alter, but apparently CCK hooks in at the #process stage of the form build which comes after form alter has had it's say.  So, no CSS and no hook_form_alter.

Then I found this very helpful post in the depths of the Content Taxononmy issue queue. Micah Freedman had been down the same trail as I!  I followed his lead, downloaded and installed the Taxonomy Manager module, and then enabled the Content Taxonomy Tree module which is bundled with the Content Taxnomy module.

I then changed my CCK taxonomy field to use the "tree" widget, indicated that I wanted it "always expanded", saved, viewed my form and this is what I saw:


That's pretty nice in it's own right, but not what we're looking for.  Obviously this module has the hooks for nesting, so this should be a piece of cake.  Plenty of Firebug, a handful of CSS code and 20 minutes later, I had the layout I wanted.

Here's the code I used:

#field-myfieldname-value-wrapper .treeview .form-item label.option { 
  font-weight: bold; 
}
#field-myfieldname-value-wrapper .treeview .treeview .form-item label.option { 
  font-weight: normal; float: left; margin-right: 10px; 
}
#field-myfieldname-value-wrapper .lastCollapsable, 
#field-toi-value-wrapper .collapsable { 
  clear: both; 
}
#field-myfieldname-value-wrapper .treeview .form-item input { 
  display: none; 
}
#field-myfieldname-value-wrapper .treeview .treeview .form-item input { 
  display: inline; 
}
#field-myfieldname-value-wrapper .treeview .collapsable
#field-myfieldname-value-wrapper .treeview .last,
#field-myfieldname-value-wrapper ul.treeview li
{ 
  background: none; 
}
#field-myfieldname-value-wrapper .hitArea { 
  display: none;
}
#field-myfieldname-value-wrapper .description { 
  clear:both; padding-top:1em;
}

Note that the font-face and all-caps seen in the screenshot are not included in this CSS code.