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.
CssClass
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.
designerview-simple.js
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:
angular.module('designer').value('cssClasses', {
'List': [
{ 'value': 'blue', 'title': 'Blue box' },
{ 'value': 'red', 'title': 'Red box' }
],
'Details': [
{ 'value': 'green', 'title': 'Green box' }
]
});
In the code above:
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">
<div class="@Model.CssClass">
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important