Customize the markup of a specific widget

To customize the markup of a specific widget, you need to replace the existing widget template with a modified one. The easiest and quickest way to do this is to copy the markup of the existing widget template and paste it in a new widget template. Next, you map this external new template to the specific widget whose look you want to modify.

This article demonstrates how to customize the markup of a News widget by adding a subtitle to the widget template.

NOTE: In the following scenario, you replace the template of just one instance of the News widget and not of News widgets in general.

Create new News widget template

  1. In Sitefinity CMS Administration backend, navigate to Design » Widget Templates.
  2. Open the Titles, dates and summaries template.
    This template is applied to the News-list view.
  3. From the template markup, select and copy everything after the first line.
    When you create your new user control in Visual Studio, a copy of the first line is automatically included.
  4. Open your Sitefinity CMS project in Visual Studio.
    To add a new user control:
    1. In the context menu of your project, click Add » New Item... » Web User Control.
    2. Name the new control NewsListTemplate.ascx
  5. Paste the markup you copied from the original template markup.
  6. To include a subtitle below the title, replace the header under class=sfnewsTitle with the code below:
  7. Save your changes and build the project.

Map the new template to your News widget

After you create the external widget template, you need to tell your News widget to use the new template. That is, map the specific widget to the template.

  1. In Sitefinity CMS backend, navigate to Pages and create new page.
  2. Drag and drop the News widget.
  3. Open the Edit mode of the widget and click on List Settings.
  4. Expand the List template dropdown menu and select Titles, dates and summaries.
  5. Click the Advanced button.
  6. Scroll down to the LayoutTemplatePath property.
    Set the property to point to the .ascx file of your newly created template by entering ~/Templates/News/NewsListTemplate.ascx
  7. Save your changes.

As a result, you can use the widget template that you customized when working with this specific News widget.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?