Add predefined styles

When you create your custom widget, you can use a CssClass property to set different CSS classes that change your widget’s appearance on different pages. Most of the built-in widgets have this property. You can set this property value in two ways. The first one is to enter it as an input value; the second one is by selecting one of several predefined values in a dropdown.

In order to have those predefined values for your custom widget, you first need to add them. Your custom widget’s designer has a designerview-simple.js file. For more information, see Create custom designer views

You need to set the predefined classes per widget template as a value to the designer AngularJS module. The following example demonstrates what format to use:

In the code above:

  • value is the name of your CSS class
  • title is the title for the class that is displayed in the dropdown menu in the widget designer

CSS styles are grouped by the name of the view where their style can be applied.
In the example above you have two views – List and Details. They have different set of styles.

NOTE: When you select a value from this dropdown menu, a class with the same name is applied to the upper element defined in the particular widget view. If you want to apply this style to another element, you can edit the template for this view and move the style binding to it using the following code: <div class="@Model.CssClass">

Additional resources

External links

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?

Next article

Add custom commands