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:
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.
|