ComponentOne WebEditor for ASP.NET: WebEditor for ASP.NET Task-Based Help > Adding CSS Classes to the CSS Class Combo Box

Adding CSS Classes to the CSS Class Combo Box

Use the DesignModeCSS property to associate a CSS file with a C1WebEditor component at design time. To add your custom styles to the CSS Class drop-down box in the Style toolbar, write code to add items to the ClassNameList dictionary.

Add the following code to your ASP.NET AJAX-enabled project:

      Visual Basic

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    If Me.MasterPageFile.Contains("BlankPage") Then

        C1WebEditor1.FullScreenMode = True

    End If

    ' Load source document

    Dim path As String = Page.MapPath("sheltie.txt")

    Dim reader As StreamReader = File.OpenText(path)

    C1WebEditor1.Text = reader.ReadToEnd()

    reader.Close()

 

    ' Add custom styles to the CSS Class drop-down

    C1WebEditor1.ClassNameList.Add("PageTitle", "customHeading")

    C1WebEditor1.ClassNameList.Add("CellText", "customText")

End Sub

Public Sub ChangeStyle()

    C1WebEditor1.DesignModeCss = "Garamond.css"

End Sub

      C#

protected void Page_Load(object sender, EventArgs e)

{

    if (this.MasterPageFile.Contains("BlankPage"))

        C1WebEditor1.FullScreenMode = true;

 

    // Load source document

    string path = Page.MapPath("sheltie.txt");

    StreamReader reader = File.OpenText(path);

    C1WebEditor1.Text = reader.ReadToEnd();

    reader.Close();

 

    // Add custom styles to the CSS Class drop-down

    C1WebEditor1.ClassNameList.Add("PageTitle", "customHeading");

    C1WebEditor1.ClassNameList.Add("CellText", "customText");

}

public void ChangeStyle()

{

    C1WebEditor1.DesignModeCss = "Garamond.css";

}

 This Topic Illustrates the Following:

Run the application, and with the caret on the first line of the document, select PageTitle from the CSS Class drop-down box to apply a background color and font size to the Heading 3 element. Click anywhere within the paragraph to the right of the picture and select CellText from the CSS Class drop-down box to justify the paragraph.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.
￿