Version

CSS Class Properties

WebExplorerBar™ provides CSS properties that can be used to customize the outfit of the control. Here is a list of CSS class properties that can be applied to both groups and items:

  • CssClass – applied to group or item header container.

  • SelectedCssClass – applied to group or item header container when it becomes selected.

  • ActiveCssClass – applied to group or item header container when it becomes active. This happens only when the control has focus. A group or item becomes visually active when we are navigating on it with the keyboard, or clicking on it with the mouse. Active style is usually combined with Selected style.

  • DisabledCssClass applied to group or item header container when it is disabled.

  • HoverCssClass – applied to group or item header container when it is hovered over.

The following example shows how to apply SelectedCssClass:

In HTML:

<ig:WebExplorerBar ID="WebExplorerBar1" runat="server">
     <Groups>
        <ig:ExplorerBarGroup Text="FirstGroup" SelectedCssClass="GroupSelectedCssClass">
            <Items>
               <ig:ExplorerBarItem Text="FirstItem" SelectedCssClass="ItemSelectedCssClass">
               </ig:ExplorerBarItem>
            </Items>
        </ig:ExplorerBarGroup>
     </Groups>
</ig:WebExplorerBar>

In Visual Basic:

Dim groupFirst As New ExplorerBarGroup()
groupFirst.Text = "FirstGroup"
groupFirst.SelectedCssClass = "GroupSelectedCssClass"
Me.WebExplorerBar1.Groups.Add(groupFirst)
Dim itemFirst As New ExplorerBarItem()
itemFirst.Text = "FirstItem"
itemFirst.SelectedCssClass = "ItemSelectedCssClass"
groupFirst.Items.Add(itemFirst)

In C#:

ExplorerBarGroup groupFirst = new ExplorerBarGroup();
groupFirst.Text = "FirstGroup";
groupFirst.SelectedCssClass = "GroupSelectedCssClass";
this.WebExplorerBar1.Groups.Add(groupFirst);
ExplorerBarItem itemFirst = new ExplorerBarItem();
itemFirst.Text = "FirstItem";
itemFirst.SelectedCssClass = "ItemSelectedCssClass";
groupFirst.Items.Add(itemFirst);