Styling taxonomy printed in widget template - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Styling taxonomy printed in widget template

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