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!
