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