Remove a client component from the News default designer view

If you want to remove elements from the default designer view, you need to override the default designer view file. To do this, perform the following:

1. In your SitefinityWebApp, in the Mvc/Views/, create a folder and name it News
2. In folder Mvc/Views/News/, create a file DesignerView.Simple.cshtml
3. Inside the file, paste the following markup:
   HTML+Razor

   @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
   
   @Html.QueryBuilderScriptReferences()
   
   <server-data default-provider-name='@Html.DefaultProviderName(Telerik.Sitefinity.Modules.News.NewsManager.GetManager())'>
   </server-data>
   
   <tabset class="nav-tabs-wrapper">
       <tab heading="@Html.Resource("Content")">
           <h4>@Html.Resource("NewsToDisplay")</h4>
           <div class="form-group">
               <div class="row">
                   <div class="col-xs-6">
                       <sf-provider-selector  sf-manager-type="Telerik.Sitefinity.Modules.News.NewsManager"
                           sf-provider-label='@Html.Resource("Provider")'
                           ng-model="properties.ProviderName.PropertyValue">
                       </sf-provider-selector>
                   </div>
               </div>
           </div>
   
           <div class="form-group">
               <div class="radio">
                   <label for="allNews" class="full-width">
                       <input id="allNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="AllItems" />
                       @Html.Resource("AllPublishedNews")
                   </label>
               </div>
               <div class="radio">
                   <label for="selectedNews" class="full-width">
                       <input id="selectedNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="SelectedItems" />
   
                       @Html.Resource("SelectedNews")
                   </label>
                   <div class="label-content">
                       <sf-list-selector sf-news-selector ng-show="properties.SelectionMode.PropertyValue=='SelectedItems'"
                                     sf-multiselect="true" sf-sortable="true"
                                     sf-provider="properties.ProviderName.PropertyValue"
                                     sf-selected-ids ="newsSelector.selectedItemsIds"></sf-list-selector>
   
                   </div>
               </div>
               <div class="radio">
                   <label for="filterNews" class="full-width">
                       <input id="filterNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="FilteredItems" />
   
                       @Html.Resource("NarrowSelection")
                       <sf-filter-selector sf-query-data="additionalFilters.value"
                           sf-taxonomy-fields="@CustomFieldsHelpers.GetTaxonomyFields(typeof(Telerik.Sitefinity.News.Model.NewsItem))"
                           sf-provider="properties.ProviderName.PropertyValue"
                           ng-show="properties.SelectionMode.PropertyValue=='FilteredItems'"
                           class="sf-filter-selector"
                           ></sf-filter-selector>
                   </label>
               </div>
           </div>
       </tab>
   
       <tab heading="@Html.Resource("ListSettings")">
           <div class="form-group">
               <div class="radio">
                   <label for="usePaging">
                       <input id="usePaging" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Paging" />
   
                       <strong>@Html.Resource("UsePaging")</strong><br />
   
                       <span>
                           @Html.Raw(String.Format(Html.Resource("DivideToItemPerPage"),
                           "<input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!=\"Paging\"' ng-model='properties.ItemsPerPage.PropertyValue'/>"))
                       </span>
                   </label>
               </div>
               <div class="radio">
                   <label for="useLimit">
                       <input id="useLimit" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Limit" />
   
                       <strong>@Html.Resource("UseLimit")</strong><br />
   
                       <span>
                           @Html.Raw(String.Format(Html.Resource("ShowLimitedItems"),
                           "<input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!=\"Limit\"' ng-model='properties.ItemsPerPage.PropertyValue'/>"))
                       </span>
                   </label>
               </div>
               <div class="radio">
                   <label for="allItems">
                       <input id="allItems" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="All" />
   
                       <strong>@Html.Resource("NoLimitPaging")</strong><br />
   
                       <span>@Html.Resource("ShowAllItems")</span>
                   </label>
               </div>
           </div>
   
           <div  class="form-group">
               <div class="row">
                   <div class="col-xs-6">
                       <label for="sortOptions">@Html.Resource("SortNews")</label>
   
                       <select id="sortOptions" ng-model="selectedSortOption" class="form-control" ng-change="updateSortOption(selectedSortOption)">
                           <option value="PublicationDate DESC"> @Html.Resource("LastPublished")</option>
                           <option value="LastModified DESC"> @Html.Resource("LastModified")</option>
                           <option value="Title ASC"> @Html.Resource("ByTitleAZ")</option>
                           <option value="Title DESC"> @Html.Resource("ByTitleZA")</option>
                           <option value="AsSetManually"> @Html.Resource("AsSetManually")</option>
                           <option value="Custom"> @Html.Resource("AsSetInAdvancedMode")</option>
                       </select>
                   </div>
               </div>
           </div>
   
           <div class="form-group">
               <label for="newsTemplateName">@Html.Resource("ListTemplate")</label>
   
               <div class="row">
                   <div class="col-xs-6">
                       <select id="newsTemplateName" ng-model="properties.ListTemplateName.PropertyValue" class="form-control">
                            @foreach (var viewName in Html.GetViewNames("News", @"List\.(?<viewName>[\w\s]*)$"))
                            {
                                <option value="@viewName"> @viewName</option>
                            }
                       </select>
                   </div>
               </div>
           </div>
   
           <expander expander-title='@Html.Resource("MoreOptions")'>
               
               <div class="row">
                   <div class="col-xs-6">
   
                       <style-dropdown selected-class="properties.ListCssClass.PropertyValue" view-name="properties.ListTemplateName.PropertyValue"></style-dropdown>
                   </div>
               </div>
   
               <div class="form-group">
                   <label for="navCssClass">@Html.Resource("CssClasses")</label>
                   <input type="text" id="navCssClass" ng-model="properties.ListCssClass.PropertyValue" class="form-control" />
               </div>
   
           </expander>
       </tab>
   
       <tab heading="@Html.Resource("SingleItemSettings")">
           <div class="form-group">
               <strong>@Html.Resource("OpenSingleItem")</strong>
               <div class="radio">
                   <label for="samePage">
                       <input id="samePage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="True" />
                          @Html.Resource("ShowInSamePage") <span class="text-muted">@Html.Resource("ShowInSamePageNote")</span>
                   </label>
               </div>
               <div class="radio">
                   <label for="existingPage">
                       <input id="existingPage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="False" />
   
                       @Html.Resource("ShowInExistingPage")
                   </label>
                   <div class="label-content">
                       <sf-list-selector
                           sf-page-selector
                           sf-selected-item-id="properties.DetailsPageId.PropertyValue"
                           ng-hide="properties.OpenInSamePage.PropertyValue == 'True'"></sf-list-selector>
                   </div>
               </div>
           </div>
   
           <div  class="form-group m-top-md row">
               <div class="col-xs-6">
                   <label for="newsTemplateName">@Html.Resource("DetailTemplate")</label>
   
                   <select id="newsTemplateName" ng-model="properties.DetailTemplateName.PropertyValue" class="form-control">
                        @foreach (var viewName in Html.GetViewNames("News", @"Detail\.(?<viewName>[\w\s]*)$"))
                        {
                            <option value="@viewName"> @viewName</option>
                        }
                   </select>
               </div>
           </div>
   
           <expander expander-title='@Html.Resource("MoreOptions")'>            
               
               <div class="row">
                   <div class="col-xs-6">
   
                       <style-dropdown selected-class="properties.DetailCssClass.PropertyValue" view-name ="properties.DetailTemplateName.PropertyValue"></style-dropdown>
   
                       <div class="form-group">
                           <label for="newsCssClass">@Html.Resource("CssClasses")</label>
                           <input type="text" id="newsCssClass" ng-model="properties.DetailCssClass.PropertyValue" class="form-control" />
                       </div>
   
                   </div>
               </div>
   
           </expander>
       </tab>
   </tabset>

4. From the code, remove the <style-dropdown></style-dropdown> client component.
5. Save and close the file.

RESULT: This removes the style-dropdown functionality from the default Newsdesigner view and disables editors to set predefined style to the widget. 

NOTE: Because the JSON and JavaScript files are not overridden, the removed client component scripts will be loaded, although you are not using them. To change the scripts or components that are loaded with the default designer view, you also need to override the default designer JSON file and remove the sf-style-dropdown client component from the array of component dependencies.
For more information, see Add a script to the News designer JSON file.