IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.
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 Feather 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 Feather: Create custom designer views.
designerview-simple.js
You need to set the predefined classes per widget template as a value to the Feather 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">
Back To Top
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important