Styling taxonomy printed in widget template
Hello,
I'm trying to style a Taxonomy label printed in a template, so that each category can be displayed with a different image.
I added this code to the Event List template to display the taxonomy :
<div class="event-category"> <sitefinity:HierarchicalTaxonField ID="HierarchicalFieldControl" runat="server" TaxonomyId="E5CD6D69-1543-427b-AD62-688A99F5E7D4" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" Expanded="false" TaxonomyMetafieldName="Category" ExpandText="ClickToAddCategories" BindOnServer="true" /></div>I'd like to be able to assign/generate a specific class for each category to produce something like this:
<div class="event-category SPECIFIC-CATEGORY-CLASS">......</div>Is there an easy way to do this?
Hi Filippo,
The easiest way to add a class name on the Label depending on the Taxonomy name inside is by using JavaScript. The Labels are rendered in ul with class 'sfCategoriesList ' > li > span tag (screenshot).
You can add a class by iterating through all the labels and check the innerHTML for the expected taxonomy name and add the class you need.
Regards,
Svetoslav Manchev
Telerik