HtmlEditor DropDown CSS Styles|UI Control for ASP.NET AJAX, C#, VB.NET

HtmlEditor DropDown CSS Styles in ASP.NET

Home > How to > HtmlEditor DropDowns CSS Styles

Information to CSS Style Drop-down

What is css class drop-down? Within the PerHtmlEditor Control, the drop-down that is used to display all the classes and that is often placed at the toolbar of the html editor is called the css class drop-down. And with the css class drop-down, developers can easily list the classes that are either defined in the page or from external css files.

In following text, we will put the focus on how to add various css styles to a pre-defined collection for creating a css class drop-down. To help you have a general understanding of the css class drop-down, we here offer a screen shot of this drop-down.

How to Add CSS Style to Drop-down in ASP.NET

The css class drop-down of the PerHtmlEditor Control is created from the collection of CssClasses. Therefore, the essence of creating the css class drop-down is to add css styles to the CssClasses collection. And in this section, we will offer you two methods to add css styles to collection.

But for either of these two methods, the first thing you need to do is to define the properties of various css items using css code, as is what has been instructed in following sample code.

<style>
.redText
{
    color: Red;
    font-size: 12px;
    font-family: Arial;
}
.table
{
    border: dashed 1px gray;
    font-size: 14px;
    font-family: Tahoma;
}
.div 
{
    background-color: Green;
    color: Yellow;
    font-weight: bold;
}
.image
{
    margin: 1px 1px 1px 1px;
    border: solid 1px blue;
}
.listSquare
{
    list-style-type: square;
    color: blue;
}
.titleText
{
    font-family: segoe ui;
    background-color: #689a05;
    color: #ffffff;
    text-align: center;
}
</style>

One method for creating the css class drop-down is to declare the CssClasses collection in aspx web page. Following example is provided here to guide developers how to add css styles to target collection via aspx code.

<kettic:PerHtmlEditor runat="server" ID="PerHtmlEditor1" SkinID="DefaultSetOfTools"
                EnableViewState="false" Height="400px">
                <CssClasses>
                    <kettic:EditorCssClass Name="Clear Class" Value="" />
                    <kettic:EditorCssClass Name="redText" Value=".redText" />
                    <kettic:EditorCssClass Name="table" Value=".table" />
                    <kettic:EditorCssClass Name="div " Value=".div " />
                    <kettic:EditorCssClass Name="image" Value=".image" />
                    <kettic:EditorCssClass Name="listSquare" Value=".listSquare" />
                    <kettic:EditorCssClass Name="titleText" Value=".titleText" />
                </CssClasses>             
</kettic:PerHtmlEditor>

The other method for adding css classes to collection is to use C# code. Similarly, we here specifically attach a sample C# code to guide developers to add css styles to drop-down using C# code programmatically.

PerHtmlEditor1.CssClasses.Add("redText ", ".redText");
PerHtmlEditor1.CssClasses.Add("table", ".table");
PerHtmlEditor1.CssClasses.Add("div", ".div");
PerHtmlEditor1.CssClasses.Add("image", ".image");
PerHtmlEditor1.CssClasses.Add("listSquare", ".listSquare");
PerHtmlEditor1.CssClasses.Add("titleText", ".titleText");

Related Tutorials for Other Supported HtmlEditor Drop-downs

Besides the drop-down collection of css styles, the PerHtmlEditor Control for ASP.NET AJAX also allows users to create other commonly used drop-downs in html editor. Following links will take you to detailed programming guiding pages on how to add these drop-downs to html editor in ASP.NET web application.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control

ASP.NET AJAX HtmlEditor UI Control

Overview Getting Started

ToolBars

Introduction Modes and Docking Button

DropDowns

Font Paragraph Styles Colors

CSS Styles

Insert Table

Dialogs

Introduction Format Code Block XHTML Validator Spellchecker Modules

Features

Edit modes Editor Showing Track Changes Comments Import and Export

Managing Content

Formatting

Client Prpgramming

HtmlEditor Event ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control