ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Custom Quick Formatting styles

It is very easy to create your own styles for the Quick Formatting panel.

Step 1:
Create a new CSS file with any file name you wish.

For example, MyQuickformat.css
.boldItalic  {
color: #c60;
font-weight: bold;
font-style:italic;
}

/* Bold & Red */
.alert  {
color: #FF0000;
font-weight: bold;
}

/* Blue verdana */
.style2  {
font-family: verdana,arial,helvetica,sans-serif;
color: #003399;
}

.style3  {
font-family: verdana,arial,helvetica,sans-serif;
color: #996633;
}

.style4  {
font-family: verdana,arial,helvetica,sans-serif;
color: #FF9933;
}

/* Bordered image */
img.Bordered  {
background-color: #e2e3ff;
padding:3px;
border: 2px solid blue;
}

For every class defined in the CSS file, there will be one entry in the Quick Formatting panel.

By default, the name of class is displayed. In our example these are boldItalic, style3 and style4.

To put a custom name for any class, simply add a comment before the class definition. That comment will be used as the name for your CSS class in the Quick Formatting panel. In our example, these are Bold & Red, Blue verdana and Bordered image.

Step 2:
Copy the CSS file somewhere on the server. For consistency, we recommend to copy it to
App_Obout/HTMLEditor/CSS folder. For an explanation about App_Obout folder, see this page.

Step 3:
Finally, let editor know which CSS file to use for the Quick Formatting panel.

<obout:Editor runat="server" Id="editor" Height="450px" Width="100%" ShowQuickFormatting="true" >
    <QuickFormatting Width="150px" SourceFile="~/App_Obout/HTMLEditor/CSS/MyQuickFormat.css" />
</
obout:Editor>


And we are done!

"Having used both Telerik and Component Art controls I can definitely say that the Obout Suite offers the most flexible and easy to implement controls about. And for the few problems I have had the support team have been most helpful, often providing showcase examples to help me understand things."

Tim Finch

Random testimonial   All testimonials