Table of Contents
Table of Contents
Customizing Footer

By default, EO.Web Editor displays Design/HTML/Preview tab buttons and bread crumb buttons in the footer area. A number of properties are provided to customize the appearance of these items. The footer area can also be completely replaced by providing a custom footer template with CustomFooterTemplate property.

Customizing view tabs buttons

EO.Web Editor supports three different views: Design, HTML and Preview. Three view tab buttons are displayed in the footer area by default. The following properties can be used to customize these tab buttons:

Property Remarks
DesignTabButtonText Gets or sets the text for the design tab button.
PreviewTabButtonText Gets or sets the text for the preview tab button.
HtmlTabButtonText Gets or sets the text for the HTML tab button.
TabButtonStyles Gets or sets the default styles for all tab buttons.
DesignTabButtonStyles Gets or sets the style to be applied to the design tab button. This property overrides the default styles set by TabButtonStyles.
HtmlTabButtonStyles Gets or sets the style to be applied to the HTML tab button. This property overrides the default styles set by TabButtonStyles.
PreviewTabButtonStyles Gets or sets the style to be applied to the preview tab button. This property overrides the default styles set by TabButtonStyles.

Customizing bread crumb buttons

The editor displays a list of bread crumb buttons to indicate the path of the current element. For example, when the editor contains a paragraph (

), and the paragraph contains a span element, placing cursor on the span element would display a bread crumb of:

HTML
Copy 
<BODY> <P> <SPAN>

User can click any of these buttons to select the corresponding element.

The following properties can be used to customize these buttons:

Property Remarks
BreadcrumbLabelText Gets or sets the text for the bread crumb label.
BreadcrumbLabelStyle Gets or sets the style applied to the bread crumb label.
BreadcrumbItemStyle Gets or sets the style applied to each bread crumb button.
BreadcrumbItemHoverStyle Gets or sets the style applied to a bread crumb button when mouse hovers over the button.
BreadcrumbItemSeparatorStyle Gets or sets the style applied to each bread crumb button separator.
BreadcrumbDropDownStyle When the footer area is not large enough to display all bread crumb buttons, it displays a drop down button to indicate there are more items. Clicking the drop down button opens a drop down with more bread crumb buttons. This property specifies the style applied to the drop down.

Customizing footer layout

The layout of the footer area can be completely customized with CustomFooterTemplate property. Two PlaceHolder controls with special ID ViewTabs and Breadcrumb can be used in place of the view tab buttons and bread crumb list:

ASPX
Copy 
<div style="float: left; width: 200px;">
    <asp:PlaceHolder runat="server" ID="ViewTabs" />
</div>
<div style="padding-top:1px">
    <asp:PlaceHolder runat="server" ID="Breadcrumb" />
</div>

At runtime, place holder ViewTabs are replaced with view tab buttons, place holder Breadcrumb are replaced with the bread crumb buttons.