How to add CSS class selector drop-down to Feather Content block

Sep 20, 2017
Knowledge

Title

URL Name

how-to-add-css-class-selector-drop-down-to-feather-content-block

Article Number

000144541

Environment

Product: Sitefinity Version: 8.x, 9.x, 10.x OS: All supported OS Versions Database: All supported Microsoft SQL Server versions

Question/Problem Description

How to add CSS class selector drop-down to Feather Content block?
How to add CSS class selector drop-down to MVC Content block?
How to add CSS class selector drop-down to sf-html-field control?

Steps to Reproduce

Clarifying Information

Error Message

Defect Number

Enhancement Number

Cause

Resolution

1. Follow the instructions in the KB article below on extending the Feather HTML field:

Feather: Override the html field

2. Update the Kendo editor's tools section with the styles needed. For this article, we are going to use the same declaration as the Kendo editor's demo page (highlighted in yellow below) - http://demos.telerik.com/kendo-ui/editor/styles

<textarea id="editor" style="height: 340px;"
kendo-editor="editorWidget" ng-model="sfModel"
k-scope-field="editorWidget"
sf-toggle-commands="strikethrough, align-justify, sub-script, sup-script, fontName, fontSize, foreground-color, colorpicker, print"
k-encoded="false"
k-stylesheets='["{{htmlFieldCssUrl}}"]',
k-paste-cleanup="{
all: false,
css: false,
keepNewLines: false,
msAllFormatting: true,
msConvertLists: true,
msTags: true,
none: false,
span: true
}",
k-tools='[
{ name: "formatting", width: 150, items: [
{ text: "Highlight Error", value: ".hlError" },
{ text: "Highlight OK", value: ".hlOK" },
{ text: "Inline Code", value: ".inlineCode" }
] },
"bold", "italic", "underline",
"justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
"insertUnorderedList", "insertOrderedList", "indent", "outdent",
{
...More code. The rest is the same as the default one...

With the steps so far, the editor will have the formatting drop-down with the 3 custom CSS classes choices. Using the drop-down the editor will add class="selectedCSSclass" to the highlighted element in the Editor. CSS styles, however, will not be applied in the editor itself. To do so follow the steps below:

1. Notice the declaration marked in green above "k-stylesheets='["{{htmlFieldCssUrl}}"]',". The "htmlFieldCssUrl" points to the following location:

~/assets/dist/css/html-field.min.css

2. Create an html-field.min.css file following the Feather convention by placing the file in the same directory and folder structure (in case you do not have it - create it). Add the following declaration to it which is the default for the html-field.min.css:

body[contenteditable=true]{padding:20px 30px;box-sizing:border-box;height:auto}

3. After this declaration, you can start adding the styles for the CSS drop-down classes. For example:

body[contenteditable=true]{padding:20px 30px;box-sizing:border-box;height:auto}

.hlError {
     background-color:red;
}
.hlOK {
     background-color:green;
}
.inlineCode {
     background-color:blue;
}

Here is the result of the above declaration

User-added image

Workaround

Notes

Keyword Phrase

Last Modified Date

9/20/2017 9:01 AM

How to add CSS class selector drop-down to Feather Content block

Files(0)

Was this article helpful?

Was this article helpful?

How to add CSS class selector drop-down to Feather Content block

Information

Related Articles