Try Now
More in this section

Forums / Designing & Styling / Styling taxonomy printed in widget template

Styling taxonomy printed in widget template

2 posts, 0 answered
  1. Filippo
    Filippo avatar
    2 posts
    22 Sep 2014
    24 Sep 2014
    Link to this post


    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" />

    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">

    Is there an easy way to do this? 


  2. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    17 Oct 2016
    29 Sep 2014
    Link to this post
    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.

    Svetoslav Manchev
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
2 posts, 0 answered