Version Sitefinity 12.1
Sitefinity 14.3 Sitefinity 14.2 Sitefinity 14.1 Sitefinity 14.0 Sitefinity 13.3 Sitefinity 13.2 Sitefinity 13.1 Sitefinity 13.0 Sitefinity 12.2 Sitefinity 12.1 Sitefinity 12.0

Topics

All topics

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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?

Next article

Customize the markup of all widgets of specific type