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.
You can change the appearance of Feather widgets by choosing a style from a predefined collection of styles. Feather widget designers use AngularJS technology, using which you just need to register all available styles for the widget in the widget designer, for example, in the designerview-simple.js file.
designerview-simple.js
The following example demonstrates what format to use: angular.module('designer').value('cssClasses', { 'DetailPage': [ { 'value': 'blue', 'title': 'Blue box' }, { 'value': 'red', 'title': 'Red box' } ], 'NewsList': [ { 'value': 'green', 'title': 'Green box' } ] });
angular.module('designer').value('cssClasses', {
'DetailPage': [
{ 'value': 'blue', 'title': 'Blue box' },
{ 'value': 'red', 'title': 'Red box' }
],
'NewsList': [
{ 'value': 'green', 'title': 'Green box' }
]
});
In the code above:
value
title
CSS styles are grouped by the name of the view where they style can be applied. For example, you may have different set of styles for the DetailPage view and for the NewsList view.
DetailPage
NewsList
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