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
Table of Contents
How Office2003, Office2003_XPStyle, Office2003_XPStyle_RTL & OfficeXP Skin are created

This section explains how Office2003, Office2003_XPStyle, Office2003_XPStyle_RTL & OfficeXP Skin are created.

Office2003 Skin

This following table lists properties used by the built-in Office2003 skin.
Property Value Remarks
The following properties apply on the Menu.
CheckIconUrl OfficeCheckIcon
EO.Web has built-in check/uncheck support. Setting CheckIconUrl to built-in image OfficeCheckIcon automatically places this check image to the left of a menu item when the navigation item's Checked is set to True.

The following properties apply on the _TopLevelItem look. The _TopLevel look is automatically applied to all top level navigation items which LookID is the default value Auto.

  • To access the _TopLevel look item in code, use Menu.LookItems.TopLevelItem
  • To modify the _TopLevel look with Menu Builder, start Menu Builder, select the _TopLevelItem look, then edit its properties in the property grid;
NormalStyle.CssText background-color:transparent;
border-left-style:none;
border-right-style:none;
border-top-style:none;
border-bottom-style:none;
padding-left:5px;
padding-right:5px;
padding-top:1px;
padding-bottom:1px; 		No border, no background color.
HoverStyle.CssText background-color: #c1d2ee;
border-left: #316ac5 1px solid;
border-right: #316ac5 1px solid;
border-top: #316ac5 1px solid;
border-bottom: #316ac5 1px solid;
padding-left: 4px;
padding-right: 4px;
padding-top: 0px;
padding-bottom: 0px; 		Specifies solid border and background color. Paddings are adjusted to compensate space occupied by the borders. The background color is the highlighting color.
SubMenu.Style.CssText background-color: #fcfcf9
border-left: #999999 1px solid;
border-right: #999999 1px solid;
border-top: #999999 1px solid;
border-bottom: #999999 1px solid;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 8pt;
font-family: tahoma;
color: black;
cursor: hand; 		Specifies the navigation item group background color, font, border and cursor. Font specified on the navigation item group is inherited by each navigation item.
Height 22 Specifies navigation item height.
SubMenu.ExpandEffect.Type EffectType.GlideTopToBottom Use glide effect for sub navigation item expanding.
SubMenu.CollapseEffect.Type EffectType.GlideTopToBottom Use glide effect for sub navigation item collapsing.
SubMenu.SideImage Office2003SideBar
Built-in image Office2003SideBar provides the gradient color strip on the left side of the sub menus.
SubMenu.ItemSpacing 3 3 pixels between each navigation items.
SubMenu.LeftIconCellWidth 25 Reserves space for sub menu side image and navigation item icons.

The following properties apply on the _Default look. The _Default look is automatically applied to all sub navigation items whose LookID is the default value Auto.

  • To access the _Default look item in code, use Menu.ItemLooks.Default
  • To modify the _Default look with Menu Builder, start Menu Builder, select the _Default look, then edit its properties in the property grid;
NormalStyle.CssText background-color:transparent;
border-left-style:none;
border-right-style:none;
border-top-style:none;
border-bottom-style:none;
padding-left:2px;
padding-right:5px;
padding-top:1px;
padding-bottom:1px; 		Similar to NormalStyle.CssText of _TopLevelItem but with different left padding.
HoverStyle.CssText background-color: #c1d2ee;
border-left: #316ac5 1px solid;
border-right: #316ac5 1px solid;
border-top: #316ac5 1px solid;
border-bottom: #316ac5 1px solid;
padding-left: 1px;
padding-right: 4px;
padding-top: 0px;
padding-bottom: 0px; 		Similar to HoverStyle.CssText of _TopLevelItem but with different left padding.
SubMenu.Style.CssText background-color: #fcfcf9
border-left: #999999 1px solid;
border-right: #999999 1px solid;
border-top: #999999 1px solid;
border-bottom: #999999 1px solid;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 8pt;
font-family: tahoma;
color: black;
cursor: hand; 		The same as SubMenu.Style.CssText of _TopLevelItem.
Height 22 Specifies navigation item height.
SubMenu.ExpandEffect.Type EffectType.GlideTopToBottom Use glide effect for sub navigation item expanding.
SubMenu.CollapseEffect.Type EffectType.GlideTopToBottom Use glide effect for sub navigation item collapsing.
SubMenu.SideImage Office2003SideBar
built-in image Office2003SideBar provides the gradient color strip on the left side of the sub menus.
SubMenu.ItemSpacing 3 3 pixels between each navigation items.
SubMenu.LeftIconCellWidth 25 Reserves space for sub menu side image and navigation item icons.

The following properties apply on the _Separator look. The _Separator look is automatically applied to all separator items which LookID is the default value Auto.

  • To access the _Separator look item in code, use Menu.ItemLooks.Separator
  • To modify the _Separator look with Menu Builder, start Menu Builder, select the Separator navigation item, then edit its properties in the property grid;
NormalStyle.CssText background-color:#c5c2b8;
margin-left:30px;
width:1px;
height:1px;

Specifies separator back color, left margin and size. A left margin is necessary so that separator does not overlap with the gradient color bar on the left side of sub menus.

Both width and height are set to 1px because EO.Web automatically adjusts separator's width in a vertical navigation item group and separator's height in a horizontal menu group.

An additional look item "sub_items" is also used. The settings for "sub_items" are almost identical to the "Default" look item except the background color for navigation item group is different.

Office2003_XPStyle, OfficeXP Skin

Office2003_XPStyle and OfficeXP skin are similar to Office2003 skin. Office2003_XPStyle skin uses different background color, navigation item group side image and check icon. OfficeXP skin uses different expand/collapse effect.

Office2003_XPStyle_RTL Skin

Office2003_XPStyle_RTL is similar to Office2003_XPStyle skin, but it renders from right to left. To render from right to left: