Table of Contents
- Getting Started
- EO.Pdf
- EO.Web
- Overview
- Installation & Deployement
- EO.Web ToolTip
- EO.Web Rating
- EO.Web Slider & RangeSlider
- EO.Web ListBox
- EO.Web ComboBox
- EO.Web Captcha
- EO.Web ASPX To PDF
- EO.Web Slide
- EO.Web Flyout
- EO.Web EditableLabel
- EO.Web ImageZoom
- EO.Web Floater
- EO.Web Downloader
- EO.Web ColorPicker
- EO.Web HTML Editor
- EO.Web File Explorer
- EO.Web SpellChecker
- EO.Web Grid
- EO.Web MaskedEdit
- EO.Web Splitter
- EO.Web Menu
- EO.Web Slide Menu
- EO.Web TabStrip
- EO.Web TreeView
- EO.Web Calendar
- EO.Web Callback
- EO.Web MultiPage
- EO.Web Dialog
- EO.Web AJAXUploader
- EO.Web ProgressBar - Free!
- EO.Web ToolBar - Free!
- EO.WebBrowser
- EO.Wpf
- Common Topics
- Reference
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:
<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:
<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.